反應原生，從android狀態欄中刪除堆棧導航顏色

Question

我創建了一個堆棧導航並將背景顏色自定義為黑色，但是我遇到了一個問題，即堆棧導航器顏色也適用於 android 狀態欄元素。 它將顏色應用於我狀態欄中的每個細節，例如時間電池，因此它不可見，請參見下圖。 我怎樣才能解決這個問題

const Stack = createStackNavigator();

export default function AppNavigation ()
{
    return (
        <Stack.Navigator screenOptions={{ headerStyle: { backgroundColor: colors.black } }} >
            <Stack.Screen name="Home" component={Home} options={({ navigation }) =>
            {
                return {
                    headerTitle: () => <Header name="Shop" navigation={navigation} />,
                };
            }} />
        </Stack.Navigator>
    );
}

Answer 1

您在本機https://reactnative.dev/docs/statusbar 中有一個 StatusBar 模塊

您可以使用它來更改 android statusBar 顏色

例如

<StatusBar backgroundColor="blue" barStyle='light-content' />

Answer 2

您可以將導航欄放在 android 欄下方。 如果您正在使用特定設備，並且您知道狀態欄的大小，我只會這樣做。 否則使用https://reactnative.dev/docs/statusbar

例子

const styles = StyleSheet.create({
  main: {
    flex: 1,
    backgroundColor: "#FCFCFC",
    marginTop: 24,
  },