反应原生，从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,
  },