React native 实现栈导航报错

Question

我想用 android 和 IOS 为我的基于 Web 的系统开发自定义应用程序运行。我是在我的项目中使用 React native/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,
})

现在这是我首先要导航的地方我的 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 中遇到错误

不变违规：此导航器缺少导航道具。在反应 -navigation 3 你必须直接设置你的应用程序容器。更多信息：https://re actnavigation.org/docs/en/app-containers.html - node_modules@react-navigation\core\lib\module\navigators\createNavigator.js:1 :1637 在 getDerivedStateFromProps - node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:68 96:46 在 applyDerivedStateFromProps - ...来自框架内部的 20 个堆栈帧

警告：%s：错误边界应该实现 getDerivedStateFromError()。在第在方法中，return 状态更新以显示错误消息或回退 UI., Ro 错误边界 - node_modules\react-native\Libraries\YellowBox\YellowBox.js:59:8 错误 - node_modules\expo\build\environment\muteWarnings.fx.js:26:24 错误 - ...来自框架内部的 28 个堆栈帧

Answer 1

import { createStackNavigator, createAppContainer } from 'react-navigation';
const MainNavigator = createStackNavigator({...});

const App = createAppContainer(MainNavigator);

参考这个link React Navigation 3.0

请注意，您遵循的教程可能使用了 React Navigation 2.0，但它是 React Navigation 3.0 中的重大更改。按照上面的link 就可以解决错误了

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

中

React native 实现栈导航报错

React native implementing stack navigation error

react-native

expo

stack-navigator