Javascript 反应本机导航给出错误“；undefined不是对象（评估'；"this.props.navigation.navigate'；"）；

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

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

import React，{Component}来自'React'；
从“react native”导入{Text，View，ScrollView}；
从“../components/LoginForm”导入LoginForm；
类型Props={}；
导出默认类登录扩展组件{
静态导航选项={
标题：空
}
render（）{
返回(
跳过登录和转到
this.props.navigation.navigate（'Home'）}>
家
);
}
}

LoginForm.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>
        );
    }
}

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

import React，{Component}来自'React'；
进口{
看法
文本，
文本输入，
可触摸不透明度，
}从“反应本机”；
类型Props={}；
导出默认类LoginForm扩展组件{
render（）{
返回(
this.props.navigation.navigate（'Home'）}
>
家
);
}
}

以下是错误的屏幕截图：

---

请帮我摆脱这个错误。提前感谢。：）

在LoginForm.js的末尾，需要放入

export{LoginForm}

如果这不起作用，请尝试这样导入：从“../components/LoginForm”导入{LoginForm}
 您可以将
与导航一起使用
，或者您应该将导航作为道具传递给子组件


import React，{Component}来自'React'；
进口{
看法
文本，
文本输入，
可触摸不透明度，
}从“反应本机”；
从“react navigation”导入{withNavigation}；
类型Props={}；
类LoginForm扩展组件{
render（）{
返回(
this.props.navigation.navigate（'Home'）}
>
家
);
}
}
使用导航导出默认值（LoginForm）我已经将LoginForm导出为
导出默认类LoginForm
。您可以共享导航代码吗？谢谢。。！！它对我有用。。。你能再帮我一个忙吗？你能告诉我关于react-native和react-native导航的任何教程吗？我是react-native的新手，我在YouTube上看了视频，但没有正确理解。所以，你能推荐任何用react native开发的从零开始到中等水平应用程序的教程吗。