我试图使用react-navigation StackNavigator,并多次回溯我的代码,但是找不到问题。我试图使用此功能为ios构建一个简单的导航菜单。
我正在使用博览会。因此,我通过使用“ create-react-native-app testExpo”命令通过终端创建一个新的expo项目来启动该项目。如下所示,我稍微修改了App.js,然后创建了一个screens文件夹->然后创建了两个屏幕:“ HomeScreen”和“ LoginScreen” 这些是我的代码和错误的图片
https://i.ibb.co/fQ9fjf2/Screen-Shot-2019-01-10-at-9-02-54-AM.png
https://i.ibb.co/7Xtx6jM/Screen-Shot-2019-01-10-at-9-03-01-AM.png
https://i.ibb.co/C8xbBVY/Screen-Shot-2019-01-10-at-9-03-07-AM.png
//错误图片 https://i.ibb.co/chgwYHT/Simulator-Screen-Shot-i-Phone-X-2019-01-10-at-08-59-08.png
App.js
import React, {Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {StackNavigator} from 'react-navigation'
import LoginScreen from './screens/LoginScreen'
import HomeScreen from './screens/HomeScreen'
export default class App extends React.Component {
render() {
return (
<AppNavigator />
);
}
}
const AppNavigator = StackNavigator({
LoginScreen: {screen: LoginScreen},
HomeScreen: {screen: HomeScreen}
})
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
HomeScreen.js
import React, { Component } from 'react';
import {Text,
View,
StyleSheet} from 'react-native';
class HomeScreen extends Component{
render() {
return(
<View>
<Text>This is the home screen</Text>
</View>
);
}
}
export default HomeScreen;
LoginScreen.js
import React, {Component} from 'react';
import {Text,
View,
StyleSheet} from 'react-native';
class LoginScreen extends Component{
render() {
return(
<View>
<Text>This is the login screen</Text>
</View>
);
}
}
export default LoginScreen;
我希望该应用程序可以在多个屏幕上启动。