您可以通过删除行alignItems: 'center'来解决此问题
你的容器样式应该看起来像这样：

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

字符串
视图使用的是未定宽度，当您使用alignItems: 'center'时，它会将您的内容推到中心。因为没有设置宽度，宽度将为0！
通过删除或更改alignItems，您可以允许flex填充视图。

我通过删除包含ReactNavigator的SafeAreaView解决了这个问题。
问题代码：

<SafeAreaView>
 <NavigationContainer>
  <Stack.Navigator>
     <Stack.Screen name="Home" component={Home} />
  </Stack.Navigator>
 </NavigationContainer>
</SafeAreaView>

字符串
无问题代码：

<NavigationContainer>
  <Stack.Navigator>
     <Stack.Screen name="Home" component={Home} />
  </Stack.Navigator>
 </NavigationContainer>

型
希望它能帮助某人。

感谢埃文培根！
通过删除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>

个字符
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 return <View></View>中添加alignItem: 'center'，你也会面临同样的问题。
只要从父<View></View>中删除alignItem: 'center'，它就可以工作了。