React native 反应本机导航显示白色屏幕
在使用react本机导航编译时,我会看到一个白色屏幕,请问这是为什么?我似乎没有得到任何错误代码,什么也没有,我只是看到一个白色的屏幕。为什么会这样?我的代码看起来像这样,表明我到目前为止似乎没有任何错误 下面是错误看起来的样子 正如您所看到的,它看起来和编译都很成功,但当我尝试查看到目前为止我所做的事情时,我得到了一个纯白色的屏幕 我的代码如下所示: App.js ControlPage.js Main.js 其他屏幕只是用来显示和隐藏抽屉。React native 反应本机导航显示白色屏幕,react-native,navigation,React Native,Navigation,在使用react本机导航编译时,我会看到一个白色屏幕,请问这是为什么?我似乎没有得到任何错误代码,什么也没有,我只是看到一个白色的屏幕。为什么会这样?我的代码看起来像这样,表明我到目前为止似乎没有任何错误 下面是错误看起来的样子 正如您所看到的,它看起来和编译都很成功,但当我尝试查看到目前为止我所做的事情时,我得到了一个纯白色的屏幕 我的代码如下所示: App.js ControlPage.js Main.js 其他屏幕只是用来显示和隐藏抽屉。 请告诉我是否遗漏了任何内容?这是将alignIt
请告诉我是否遗漏了任何内容?这是将alignItems:“center”应用于导航器的容器时出现的常见问题。
从App.js中删除它,它应该可以工作。我现在让它工作了,我只是做了一些调整,更改了一些链接,在这里一切都很好。不再出现白色屏幕。从app.js文件中删除alignItems:“center”后,它工作了。由于某些原因,react native不会显示任何错误消息,而是显示白色屏幕
//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;
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;
//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;