时间戳

首页 > 解决方案 > 在 react-native 中创建 stackNavigator 后导航到页面时出错

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

问题描述

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

这是我的代码createStackNavigator

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

      Profile: { 
        screen: ProfileActivity 
      },

      MakeAccount: { 
        screen: MainProject 
      }

   });

  const AppContainer = createAppContainer(RootStack);

  export default AppContainer;

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

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

当我使用 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;

标签： javascriptreact-nativereact-native-navigation

解决方案

看你贴在这里的代码，好像创建stackNavigator就ok了。错误信息非常清楚地说明了问题：

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

因此，这可能意味着您没有React.Component在MainProject类上进行扩展，或者您的导入/导出在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基于你到目前为止提供的信息

推荐阅读