React Native ：undefined 不是对象(评估 '_this2.props.navigation.navigate')

Question

我是 react-native 的新手，我正在尝试使用 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);

Answer 1

我发现了我的错误：

在我的应用程序上.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

Answer 2

这就是我解决它的方式。

转到正在使用navigation的组件的父组件。并按如下方式调用组件。

<Component {...this.props} />

这使得navigation也可用于子组件。