react-native - 反应原生导航显示白屏
问题描述
使用 react-native 导航编译时出现白屏,请问为什么会这样?我似乎没有收到任何错误代码,什么都没有,我只是看到一个白屏。为什么会这样?我的代码看起来像这样,表明到目前为止我似乎没有任何错误。
如您所见,它看起来并成功编译,但是当我尝试查看到目前为止我所做的事情时,我得到了一个纯白的屏幕
我的代码看起来是这样的:
应用程序.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;
ControlPage.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;
主.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;
其他屏幕只是显示和隐藏抽屉。请问我需要指导我错过了什么吗?
解决方案
从 app.js 文件中删除 alignItems: 'center' 后,它起作用了。由于某种原因,本机反应不显示任何错误消息而不是白屏
推荐阅读
- python - 使用按钮和回调方法退出 python 程序
- r - 有没有一些方便的方法可以将 rmarkdown 转换为 pandoc markdown?
- c - 使用 strsep() 读取文本文件时出现空行/字符
- django - django 使用物化模式创建表单
- c++ - 设置从文件读取的开始和结束限制
- vba - 如何在 VBA 中传递 API 密钥以获取和发布请求?
- javascript - 如何使用python检查子域是否存在?
- reactjs - 直到我在选择标签中选择了两个选项之后,函数 onHandleChange 才会起作用
- r - 如何将 position_dodge 应用于同一图中的 geom_point 和 geom_text?
- javascript - HTML主类下拉选择和子类列表