反应导航空白屏幕答案

【问题标题】：React Navigation blank screen反应导航空白屏幕
【发布时间】：2017-11-20 02:02:03
【问题描述】：

我最近将我的 Expo 应用更新为 React Navigation 1.0.0-beta.19。从那时起，它一直只显示白屏。可能是什么问题？

这是繁殖用的零食。 https://snack.expo.io/@rajat1saxena/react-navigation-test

屏幕：

【问题讨论】：

标签： react-native expo

【解决方案1】：

您可以通过删除以下行来解决此问题：alignItems: 'center'

您的容器样式应如下所示：

container: {
  flex: 1,
  justifyContent: 'center',
  paddingTop: Constants.statusBarHeight,
  backgroundColor: '#ecf0f1'
}

视图使用未确定的宽度，当您使用alignItems: 'center' 时，它会将您的内容推到中心。因为没有设置宽度，所以宽度将为 0！

通过删除或更改alignItems，您允许 flex 填充视图。

【讨论】：

【解决方案2】：

谢谢埃文培根！

通过删除alignItems: 'center'，我的问题得到解决。

只需比较以下 2 个App.js 文件..

App.js with issue

<View style={styles.container}>
<StatusBar style="auto" />
<SafeAreaProvider>
    <NavigationContainer theme={DefaultTheme}>
        <StackNavigator /> // My Stack Navigator Component
    </NavigationContainer>
</SafeAreaProvider>

const styles = StyleSheet.create({container: {flex: 1, alignItems: 'center', justifyContent: 'center' }});

working App.js

<View style={styles.container}>
<StatusBar style="auto" />
<SafeAreaProvider>
    <NavigationContainer theme={DefaultTheme}>
        <StackNavigator /> // My Stack Navigator Component
    </NavigationContainer>
</SafeAreaProvider>

const styles = StyleSheet.create({container: {flex: 1, justifyContent: 'center' }});

主要区别在于容器的样式。如果我们在您的 app.js 中添加 alignItem: 'center' return <View></View> 您将面临同样的问题。

只需从父 <View></View> 中删除 alignItem: 'center' 即可。

【讨论】：