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

Question

我想为我的基于 Web 的系统开发一个自定义应用程序，以便在 android 和 IOS 上运行。我是在我的项目中使用 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 中出错：

Invariant Violation：此导航器缺少导航道具。在反应 -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()。在 th at 方法，返回状态更新以显示错误消息或回退 UI。，Ro otErrorBoundary - node_modules\react-native\Libraries\YellowBox\YellowBox.js:59:8 错误 - node_modules\expo\build\environment\muteWarnings.fx.js:26:24 错误 - ... 来自框架内部的另外 28 个堆栈帧

Answer 1

导入 { createStackNavigator, createAppContainer } 从 '反应导航';
const MainNavigator = createStackNavigator({...});

const App = createAppContainer(MainNavigator);

参考这个链接 React Navigation 3.0

请注意，您遵循的教程可能使用了 React Navigation 2.0，但它是 React Navigation 3.0 的一项重大更改。按照上面的链接，它会解决错误。

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