我是反应原生的新手,我正在尝试使用StackNavigator,但它不起作用
我正在尝试调用组件并在单击按钮时进行渲染。
但是我收到了这个错误:
undefined is not an object (evaluating '_this2.props.navigation.navigate')
这是我的主要内容:
export default class Home extends Component<{}> {
constructor(props) {
super(props);
this.email = null;
this.amount = null;
this.device = null;
}
render() {
return (
<ScrollView style={styles.styleSV}>
<Text
style={styles.styleLogin}>
Login
</Text>
<View style={styles.styleForm}/>
<TextInput placeholder='email' onChangeText={(text) => this.email }/>
<TextInput placeholder='amount' onChangeText={(text) => this.amount }/>
<TextInput placeholder='device' onChangeText={(text) => this.device }/>
<View style={styles.styleButtonSignup}/>
<Button
onPress={() =>
this.props.navigation.navigate('PaypalPayment', { email: this.email })
}
title='Next'
/>
</ScrollView>
);
}
}
const NavigationScreen = StackNavigator({
PaypalPayment: { screen: PaypalPayment },
Home: { screen: Home}
});
AppRegistry.registerComponent('paypal', () => NavigationScreen);
答案 0 :(得分:1)
我发现了我的错误:
在我的App.js上,我没有打电话给我StackNavigator
export const RootNavigation = StackNavigator({
Home: { screen: Home },
PaypalPayment: { screen: PaypalPayment }
});
AppRegistry.registerComponent('paypal', () => RootNavigation);
export default class App extends Component<{}> {
render() {
return (
<RootNavigation/>
)
}
}
现在它正在运作。
我使用了此文档:https://reactnavigation.org/docs/intro/#Introducing-Stack-Navigator
答案 1 :(得分:1)
这就是我的解决方法。
转到您正在使用navigation
的组件的父组件。
并按如下所示调用组件。
<Component {...this.props} />
这使得navigation
也可用于子组件。