React native React本机实现堆栈导航错误
我想为我的基于网络的系统开发一个定制的应用程序，以运行android和IOS。我是一个在我的项目中使用react native/expo的新手。我想创建一个登录页面和仪表板，以便在登录后重定向。现在我在实现stack navigator时遇到了麻烦，因为我只是在学习youtube教程 这是我的App.jsReact native React本机实现堆栈导航错误,react-native,expo,stack-navigator,React Native,Expo,Stack Navigator,我想为我的基于网络的系统开发一个定制的应用程序，以运行android和IOS。我是一个在我的项目中使用react native/expo的新手。我想创建一个登录页面和仪表板，以便在登录后重定向。现在我在实现stack navigator时遇到了麻烦，因为我只是在学习youtube教程 这是我的App.js import React, { Component } from 'react'; import { createStackNavigator } from 'react-navigation
import React, { Component } from 'react';
import { createStackNavigator } from 'react-navigation';
import Login from './modules/Login.js';
export default createStackNavigator({
login: Login,
})
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
import React，{Component}来自'React'；
从“react native”导入{样式表、文本、视图、文本输入、按钮}；
类登录扩展组件{
render（）{
返回(
工资单应用程序
在这里登录
电子邮件
密码
);
}
}
const styles=StyleSheet.create({
//观点
容器：{
弹性：1，
背景颜色：“#fff”，
},
标题：{
填充：5，
弹性：2，
背景颜色：“#6868”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
内部：{
弹性：7，
背景颜色：“#828181”，
为内容辩护：“中心”，
填充：20，
},
内部标题：{
弹性：1，
},
内部日志详细信息：{
填充：5，
弹性：1，
},
内部页脚：{
弹性：4，
},
页脚：{
背景颜色：“#6868”，
弹性：1，
},
//正文
蓝色巨人：{
玛金托普：30，
颜色：'粉蓝色'，
fontWeight:'粗体'，
尺寸：30，
},
smallBlue：{
玛金托普：30，
颜色：'粉蓝色'，
fontWeight:'粗体'，
尺寸：24，
},
//钮扣
btnLogin：{
玛金托普：10，
},
//文本输入
文本登录：{
边框颜色：“白色”，
}
});
导出默认登录名
const MainNavigator=createStackNavigator（{…}） const App=createAppContainer（MainNavigator） 请参阅此链接 请注意，您遵循的教程可能使用了react navigation 2.0，但这是react navigation 3.0中的一个突破性更改。按照上面的链接，它将解决错误
这只意味着您必须将主要导出组件包装在
createAppContainer