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

这是错误的屏幕截图： Error when navigating to page in another folder

请帮助我摆脱此错误。提前致谢。：）

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

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

2 个答案: