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

Question

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

这是我的 createStackNavigator

代码

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

      Profile: { 
        screen: ProfileActivity 
      },

      MakeAccount: { 
        screen: MainProject 
      }

   });

  const AppContainer = createAppContainer(RootStack);

  export default AppContainer;

这是我用于导航到 page/screen

按钮的代码

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

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

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

此外，这是我的 MainProject class:

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;

Answer 1

看你贴在这里的代码，好像stackNavigator的创建是可以的。报错信息很清楚问题所在：

"MakeAccount" must be a React Component.

所以，这可能意味着您没有在 MainProject class 上扩展 React.Component，或者您的 imports/exports 在 MainProject 上也不正确正在实例化或导入 class 的位置（应该在创建堆栈的同一文件中）。

它需要像这样，在你实例化的文件上 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 根据你到现在为止提供的信息

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

Error when navigating to a page after creating stackNavigator in react-native

javascript

react-native

react-native-navigation