React Navigation 宽度不是 100% 适合 ios 模拟器上的屏幕

Question

当我尝试不使用 Stack.Screen 渲染 HomeScreen 组件时，我能够获得 100% 的宽度，但是当我尝试使用下面的代码时，100% 宽度的屏幕不起作用

const HomeScreen = () => {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'red'}}>
            <Text>Home Screen</Text>
        </View>
    );
}

const MainContainer = () => {

    return (
        <NavigationContainer >
            <Stack.Navigator>
                <Stack.Screen
                    name="Home"
                    component={HomeScreen}
                />
            </Stack.Navigator>
        </NavigationContainer>
    );

Answer 1

你可以试试 display: flex 和 remove flex:1

Answer 2

不仅如此，如果设置headerShown: false ，宽度为零。

只需删除NavigationContainer的外部View即可。 这个对我有用。

Answer 3

当您遇到此问题时，您是否正在运行远程调试器？ 我有同样的问题，当我关闭它时它解决了。

看起来这可能是一个加载缓慢的问题，并且在渲染之前没有应用样式表，所以屏幕占用了 header 文本的宽度（尽管我可能完全错了）。 当我从我的视图组件中删除样式道具，保存它，然后放回去并再次保存它暂时解决了这个问题，直到我重新加载 Expo。