反应导航空白屏幕

Question

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

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

屏幕：

Answer 1

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

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

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

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

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

Answer 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>，您将面临同样的问题。

只需从父alignItem: 'center'中删除<View></View>，它就会起作用。