react-native-navigation 给出错误“未定义不是对象（评估'_this.props.navigation.navigate'）”答案

【问题标题】：react-native-navigation giving error "undefined is not an object (evaluating '_this.props.navigation.navigate')"react-native-navigation 给出错误“未定义不是对象（评估'_this.props.navigation.navigate'）”
【发布时间】：2019-05-24 17:53:12
【问题描述】：

我正在尝试从登录页面导航到主页，但我的登录表单位于另一个名为“component”的文件夹中，当我使用 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

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

【问题讨论】：

你能分享导航代码吗？

标签： javascript react-native react-native-android react-navigation

【解决方案1】：

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

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);

【讨论】：

谢谢..!!它对我有用......你能再帮我一个忙吗，你能告诉我任何关于 react-native 和 react-native-navigation 的教程吗，我是 react-native 的新手，我在 YouTube 上观看了视频，但没有正确理解。所以你能推荐任何从零开始到中级应用程序开发的教程吗？

【解决方案2】：

您需要在 LoginForm.js 的末尾添加 export {LoginForm};

如果这不起作用，请尝试像这样进行导入： import {LoginForm} from '../components/LoginForm';

【讨论】：

我已经将 LoginForm 导出为export default class LoginForm 。