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

Question

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

这是我的应用程序.js

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

export default createStackNavigator({
login: Login,
})

现在，我想首先导航我的登录名.js它位于模块/登录名的位置.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 中遇到错误：

不变冲突：此导航器缺少导航道具。在反应中 -导航 3 您必须直接设置应用容器。更多信息： https://re actnavigation.org/docs/en/app-containers.html - node_modules@react-navigation\core\lib\moduleavigators\createNavigator.js：1 ：1637 in getDerivedStateFromProps - node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js：68 96：46 在 applyDederdStateFromProps - ...来自框架内部的 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 } from "反应导航";
const MainNavigator = createStackNavigator({...}(;

const App = createAppContainer(MainNavigator(;

请参阅此链接 反应导航 3.0

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

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