使用反应本机导航进行编译时出现白屏,请问为什么会这样?我似乎没有收到任何错误代码,什么也没有,我只看到一个白屏。为什么会这样呢?我的代码看起来像这样,表明到目前为止我似乎没有任何错误。
Here is what the Error seems to look like
正如您所看到的,它看起来并成功编译,但是当我尝试查看到目前为止我所做的事情时,我得到一个纯白色的屏幕
我的代码如下所示:
App.js
//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import DrawerNavigator from './components/ControlPage';
// create a component
class App extends Component {
render() {
return (
<View style={styles.container}>
<DrawerNavigator/>
</View>
);
}
}
// define your styles
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFF',
},
});
//make this component available to the app
export default App;
控制页面.js
import React, { Component } from 'react';
import { StyleSheet, View, Text, TouchableHighlight, Image } from 'react-native';
import { createAppContainer} from 'react-navigation';
import { createDrawerNavigator } from 'react-navigation-drawer';
import Main from './Main';
import Screen1 from './Screen1';
import Screen2 from './Screen2';
const MyDrawerNavigator = createDrawerNavigator({
Home : {screen : Main},
Screen1:{screen : Screen1},
Screen2:{screen : Screen2},
},
{
InitialRouteName : 'Home',
drawerWidth : 300,
drawerPosition: 'left'
}
);
const AppContainer = createAppContainer(MyDrawerNavigator);
// create a component
class DrawerNavigator extends Component {
render() {
return (
<View style={styles.container}>
<AppContainer/>
</View>
);
}
}
// define your styles
const styles = StyleSheet.create({
view:{
flex:1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
},
text:{
fontSize: 26,
color: 'purple'
},
touchableHighlight: {
width: 50,
height: 50,
backgroundColor: 'red',
borderRadius : 50,
alignItems : 'center',
justifyContent: 'center',
position: 'absolute',
left: 10,
top : 10
},
open: {
color : 'white',
fontSize : 16,
fontWeight: 'bold'
},
});
//make this component available to the app
export default DrawerNavigator;
Main.js
//import liraries
import React, { Component } from 'react';
import { StyleSheet, View, Text, TouchableHighlight, Image } from 'react-native';
// create a component
class Main extends Component {
static navigationOptions = {
drawerLabel: 'Home',
drawerIcon : () =>(
<Image source ={require('../icons/home.png')}/>
),
}
render() {
return (
<View style={styles.container}>
<TouchableHighlight onPress ={() => this.props.navigation.dispatch(DrawerActions.openDrawer())} style={styles.touchableHighlight} underlayColor={'rgba(0,0,0,0.8)'}>
<Text style={styles.open}>OPEN</Text>
</TouchableHighlight>
<Text style={styles.text}> Welcome to Home Screen </Text>
</View>
);
}
}
// define your styles
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFF',
},
text:{
fontSize: 26,
color: 'purple'
},
});
//make this component available to the app
export default Main;
其他屏幕只是显示和隐藏抽屉。
请问我需要指导吗?我错过了什么吗?