react-native - undefined 不是一个对象(评估 this.props.navigator.push)

Question

我有两个页面，即登录页面和付款页面。
我试图通过点击登录按钮导航到支付页面，但我收到错误 undefined is not an object(评估 this.props.navigator.push)

代码如下:

import React, {
StyleSheet,
Text,
View,
TextInput,
Component,
Alert,
Navigator
} from 'react-native';

var Button = require('react-native-button');
import Payments from '../payments'


class Signin extends Component{


 onSubmitPressed(){
    this.props.navigator.push({
        title: 'secure Page',
        component: <Payments/>

    });


  };

render() {
return(

 <View style={styles.container}>
<View style={styles.Inputview}>
<TextInput id='user' style={styles.input}
placeholder={'Username'}
/>
<TextInput id='Password' secureTextEntry={true}
placeholder={'Password'}
onChangeText={password => this.setState({password})}
/>
</View>

<View >
 <Button style={styles.Register}  
 onPress={(this.onSubmitPressed)}>
  Sign In
  </Button>
 </View>
 </View>
 )
  }
 }


 export default Signin


If any one let me know how to solve this issue??

Answer 1

您需要将 Navigator 和初始路由设置为入口点，而不是常规组件。尝试这样的事情:

(还设置了一个工作示例 here )

https://rnplay.org/apps/iKx2_g

class App extends Component {
  renderScene (route, navigator) {
    return <route.component navigator={navigator} />
  }
  render() {
    return (
      <Navigator
        style={styles.container}
        renderScene={this.renderScene.bind(this)}
        initialRoute={{component: SignIn}}  
      />
    );
  }
}

class SignIn extends Component {
  _navigate () {
    this.props.navigator.push({
        component: Payments
    })  
  }
  render () {
    return (
      <View>
        <Text>Hello from SignIn</Text>
        <Button onPress={this._navigate.bind(this)} />
      </View>
    )
  }
}

class Payments extends Component {
    render () {
    return (
      <Text>Hello from Payments</Text>
    )
  }      
}