反应本机实现堆栈导航错误

Question

我想为我基于Web的系统开发一个自定义应用程序，以与Android和IOS一起运行。我对在我的项目中使用反应原生/expo非常初学者。我想创建一个登录页面和仪表板，以便在登录后重定向。现在我在实现堆栈导航器时遇到问题，因为我只遵循了一个youtube教程。

这是我的App.js

import React, { Component } from 'react';
import { createStackNavigator } from 'react-navigation';
import Login from './modules/Login.js';


export default createStackNavigator({
    login: Login,
})

现在，我想首先在这里导航我的登录名。js，它位于modules/login.js

import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';

class Login extends Component {

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.header}>
                      <Text style={styles.bigBlue}>Payroll App</Text>
                </View>
                <View style={styles.inner}>
                    <View style={styles.inner_title}>
                        <Text style={styles.smallBlue}>Login here</Text>
                    </View>
                    <View style={styles.inner_logdetails}>
                        <Text>Email</Text>
                        <TextInput style={styles.textLogin} placeholder='Email'

                        />
                        <Text>Password</Text>
                        <TextInput style={styles.textLogin} placeholder='Password'

                        />
                        <Button style={styles.btnLogin} title='Login'/>
                    </View>
                    <View style={styles.inner_footer}>
                    </View>
                </View>
                <View style={styles.footer}>
                </View>
            </View>
          );
    }
}

const styles = StyleSheet.create({

//Views
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  header: {
      padding: 5,
      flex: 2,
      backgroundColor: '#686868',
      alignItems: 'center',
      justifyContent: 'center',
  },
  inner: {
        flex: 7,
        backgroundColor: '#828181',
        justifyContent: 'center',
        padding: 20,
  },
  inner_title: {
        flex: 1,
  },
  inner_logdetails: {
        padding: 5,
        flex: 1,
  },
  inner_footer: {
        flex: 4,
  },
  footer: {
        backgroundColor: '#686868',
        flex: 1,
  },

//Text
  bigBlue: {
      marginTop: 30,
      color: 'powderblue',
      fontWeight: 'bold',
      fontSize: 30,
  },
  smallBlue: {
        marginTop: 30,
        color: 'powderblue',
        fontWeight: 'bold',
        fontSize: 24,
  },

//Button
  btnLogin: {
        marginTop: 10,
  },

//TextInput
      textLogin: {
            borderColor: 'white',
      }
});

export default Login

如果我尝试运行我的代码，我在cmd中遇到错误：

固定冲突：此导航器缺少导航 prop。在 react -navigation 3 中，必须直接设置应用容器。更多信息： html" target="_blank">https://re actnavigation.org/docs/en/app-containers.html - node_modules@react导航\核心\lib\module\navigators\createNavigator.js：1 ：1637 in getDerivedStateFromProps - node_modules\react-native\Libraries\renderer\oss\ReactNativeRenderer-dev.js：68 96：46 in applyDerivedStateFromProps - ...来自框架内部的 20 多个堆栈帧

警告:%s:错误边界应实现getDerivedStateFromError()。在这个方法中，返回一个状态更新以显示一个错误消息或回退UI。，Ro otErrorBoundary-node _ modules \ react-native \ Libraries \ yellow box \ yellow box . js:59:8 in error-node _ modules \ Expo \ build \ environment \ mute warnings . FX . js:26:24 in error-...来自框架内部的28个以上堆栈框架

Answer 1

从“反应导航”导入{createStackNavigator，createAppContainer}
const MainNavigator=创建堆栈导航器（{…}）；

const App=createAppContainer（MainNavigator）；

请参考此链接React导航3.0

请注意，您遵循的教程可能使用了反应导航2.0，但它是反应导航3.0中的重大更改。按照上面的链接，它将解决错误。

这只是意味着您必须将您的主要导出组件包装在< code>createAppContainer中