在 react-native 中创建 stackNavigator 后导航到页面时出错答案

【问题标题】：Error when navigating to a page after creating stackNavigator in react-native在 react-native 中创建 stackNavigator 后导航到页面时出错
【发布时间】：2019-11-12 16:36:58
【问题描述】：

我正在使用 react-native 创建一个应用程序，我想使用 createStackNavigator 来拥有三个屏幕。我有一个按钮，我想用它来将用户带到第三个屏幕。

这是我的 createStackNavigator 代码

const RootStack = createStackNavigator({
      Login: { 
        screen: LoginActivity 
      },

      Profile: { 
        screen: ProfileActivity 
      },

      MakeAccount: { 
        screen: MainProject 
      }

   });

  const AppContainer = createAppContainer(RootStack);

  export default AppContainer;

这是导航到页面/屏幕的按钮的代码

&lt;Button title="Click Here To Create an Account" onPress={() =&gt; this.props.navigation.navigate('MakeAccount')} color="#2196F3" /&gt;

当我使用 Xcode 在 iso 模拟器上运行我的应用程序时，我收到以下消息：

我不知道为什么会这样……

另外，这是我的MainProject 课程：

class MainProject extends Component {
    constructor(props) {
        super(props) 

        this.state = {
            UserName: '',
            UserEmail: '',
            UserPassword: ''
        }
    }

    UserRegistrationFunction = () => {
        const { UserName } = this.state;
        const { UserEmail } = this.state;
        const { UserPassword } = this.state; 

        fetch('http://ip/user_registration.php', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({

                email: UserEmail,

                password: UserPassword

              })

    }).then((response) => response.json())
        .then((responseJson) => {


            Alert.alert(responseJson);   
        }).catch((error) => {
            console.error(error);
        });
}

render() {
    return (
        <View style={styles.MainContainer}>
            <Text style={{ fontSize: 20, color: "#000", textAlign: 'center', marginBottom: 15}}>User Registron Form</Text>
            <TextInput


                placeholder="Enter User Name"
                onChangeText={UserName => this.setState({UserName})}

                  underlineColorAndroid='transparent'

                style={styles.TextInputStyleClass}
                />
           <TextInput


                placeholder="Enter User Email"
                onChangeText={UserEmail => this.setState({UserEmail})}


                underlineColorAndroid='transparent'

                style={styles.TextInputStyleClass}
                />

        <TextInput

                placeholder="Enter User Password"
                onChangeText={UserPassword => this.setState({UserPassword})}

                  underlineColorAndroid='transparent'

                style={styles.TextInputStyleClass}

                secureTextEntry={true}
                />

                <Button title="Click Here To Register" onPress={this.UserRegistrationFunction} color="#2196F3" />
        </View>
        );
    }   
}

export default MainProject;

【问题讨论】：

它是一个类组件。类 MainProject 扩展组件
我已将课程代码添加到我的问题中
我也导入了组件 import MainProject from './account';
我对您的问题的建议是：编辑它以专注于显示 MainProject 类以及您的导入和导出，删除有关按钮的部分，因为您的问题与按钮单击或堆栈无关创建，它是关于组件和导入/导出的，基于您显示的错误。有一个更集中的问题，也许有更多专业知识的其他人可以在这里帮助我们
补充一下 Calvin 的观点，可能是因为您的导入语句（应该与createStackNavigator 在同一个文件中）配置不正确。请注意，导入路径是相对于它所在的文件的。 - 因此，如果路径是 ./account，则意味着 MainProject 位于相对于 createStackNavigator 所在的子目录中。

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

【解决方案1】：

看你这里贴的代码，好像stackNavigator的创建是ok的。错误信息很清楚的说明问题：

“MakeAccount”必须是一个 React 组件。

因此，这可能意味着您没有在 MainProject 类上扩展 React.Component，或者您的导入/导出在 MainProject 被实例化或您正在导入类的位置不正确（应该是在您创建堆栈的同一文件中）。

在您实例化MainProject 的文件上必须是这样的：

import React from "react";
export default class MainProject extends React.Component {
  ...
}

然后将它导入到您正在创建导航器的位置：

import MainProject from "./CompletePathToMainProject";
...
//Your logic of stackNavigator creation

我不知道您的文件夹和文件的结构，所以上面的CompletePathToMainProject 表示类似./account/MainProject.js 的意思，根据您到目前为止提供的信息

【讨论】：