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。