javascript - react native 导航给出错误 "undefined is not an object (evaluating ' _this.props.navigation.navigate')"

Question

我试图从登录页面导航到主页，但我的登录表单位于另一个名为“组件”的文件夹中，当我使用 touchableOpacity 从登录页面导航时，它正在工作，但是当我从登录表单组件做同样的事情给我一个错误。有人可以告诉我我做错了什么吗？

这是我尝试执行的代码。

Login.js代码

import React, {Component} from 'react';
import {Text, View, ScrollView} from 'react-native';
import LoginForm from '../components/LoginForm';

type Props = {};
export default class Login extends Component<Props> {
    static navigationOptions = {
        header: null
    }
    render() {
        return (
            <ScrollView>
                <View>
                    <LoginForm/>
                </View>
                <View>
                    <Text> Skip login and goto</Text>
                    <Text onPress={()=>this.props.navigation.navigate('Home')}>
                        Home
                    </Text>
                </View>
            </ScrollView>
        );
    }
}

LoginForm.js代码

import React, {Component} from 'react';
import {
    View,
    Text,
    TextInput,
    TouchableOpacity,
} from 'react-native';

type Props = {};
export default class LoginForm extends Component<Props> {
    render() {
        return (
            <View>
                <TextInput
                    placeholder={'Email'}
                    keyboardType={'email-address'}
                    autoCapitalize={'none'}
                />
                <TextInput
                    placeholder={'Password'}
                    secureTextEntry={true}
                />
                <TouchableOpacity
                    activeOpacity={0.6}
                    onPress={()=>this.props.navigation.navigate('Home')}
                >
                    <Text>
                        Home
                    </Text>
                </TouchableOpacity>
            </View>
        );
    }
}

错误截图如下: <强> Error when navigating to page in another folder

请帮助我摆脱这个错误。提前致谢。 :)

Answer 1

您可以使用withNavigation，或者您应该将导航作为 Prop 传递给子组件。

import React, {Component} from 'react';
import {
    View,
    Text,
    TextInput,
    TouchableOpacity,
} from 'react-native';
import { withNavigation } from 'react-navigation';

type Props = {};
 class LoginForm extends Component<Props> {
    render() {
        return (
            <View>
                <TextInput
                    placeholder={'Email'}
                    keyboardType={'email-address'}
                    autoCapitalize={'none'}
                />
                <TextInput
                    placeholder={'Password'}
                    secureTextEntry={true}
                />
                <TouchableOpacity
                    activeOpacity={0.6}
                    onPress={()=>this.props.navigation.navigate('Home')}
                >
                    <Text>
                        Home
                    </Text>
                </TouchableOpacity>
            </View>
        );
    }
}
export default withNavigation(LoginForm);