реакция-нативная навигация выдает ошибку "undefined не является объектом (оценивается как _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

Вы можете использовать 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);

Answer 2

В конце вашего LoginForm.js вам нужно поставить export {LoginForm};

Если только это не работает, попробуйте сделать ваш импорт следующим образом: import {LoginForm} из '../components/LoginForm';