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中会出现错误：

不变违反：此导航器缺少导航道具。在反应 -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 applyDerivedStateFromProps中的96:46 -...从框架内部获取另外20个堆栈框架

警告：％s：错误边界应实现getDerivedStateFromError（）。在 at方法，返回状态更新以显示错误消息或后备UI。 otErrorBoundary -错误的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}   '反应导航';
  const MainNavigator = createStackNavigator（{...}）;

const App = createAppContainer（MainNavigator）;

请参阅此链接 React Navigation 3.0

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

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

中

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

1 个答案: