React native navigation显示白色屏幕

dluptydi  于 2023-04-07  发布在  React
关注(0)|答案(4)|浏览(163)

我在使用react-native导航编译时得到一个白色屏幕,请问为什么会这样?我似乎没有得到任何错误代码,什么都没有,我只是看到一个白色屏幕。为什么会这样?我的代码看起来像这样,并显示我似乎没有任何错误到目前为止。
下面是错误看起来像x1c 0d1x
正如你可以看到它的外观和编译成功,但当我试图看看我做了什么,到目前为止,我得到一个纯白色屏幕
我的代码看起来是这样的:

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;

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;

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;

其他屏幕只是显示和隐藏抽屉。请我需要指导,我错过了什么?

nr9pn0ug

nr9pn0ug1#

alignItems: 'center'应用到导航器的容器时,这是一个常见的问题。从App.js中删除它,它应该可以工作。

svgewumm

svgewumm2#

删除alignItems后:app.js文件中的'center',它工作了。由于某种原因,react native不显示任何错误消息,而不是白色

ffscu2ro

ffscu2ro3#

检查以确保您没有使用SafeAreaView Package NavigationContainer。

yvt65v4c

yvt65v4c4#

我现在让它工作了,我只是做了一些调整,改变了一些链接,所有工作在这里很好。没有更多的白色屏幕。

相关问题