react-native-navigation給出錯誤“未定義不是對象（評估'_this.props.navigation.navigate'）”

Question

我正在嘗試從登錄頁面導航到主頁，但是我的登錄表單位於另一個名為“ 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>
        );
    }
}

這是錯誤的屏幕截圖： 導航到另一個文件夾中的頁面時出錯

請幫助我擺脫這個錯誤。 提前致謝。 :)

Answer 1

在LoginForm.js的最后，您需要添加export {LoginForm};

如果只有這樣，請嘗試進行如下導入：從'../components/LoginForm'導入{LoginForm};

Answer 2

您可以使用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);