时间戳

首页 > 解决方案 > 反应原生，从android状态栏中删除堆栈导航颜色

javascript - 反应原生，从android状态栏中删除堆栈导航颜色

问题描述

我创建了一个堆栈导航并将背景颜色自定义为黑色，但我遇到了一个问题，堆栈导航器颜色也适用于 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>
    );
}

标签： javascriptreactjsreact-native

解决方案

您在本机反应中有一个 StatusBar 模块 https://reactnative.dev/docs/statusbar

您可以使用它来更改 android statusBar 颜色

例如

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

推荐阅读