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

【问题标题】：react native, remove stack navigation color from android status bar反应原生，从android状态栏中删除堆栈导航颜色
【发布时间】：2020-10-13 10:41:24
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

你在 react native 中有一个 StatusBar 模块 https://reactnative.dev/docs/statusbar

你可以用它来改变android statusBar的颜色

例如

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

【讨论】：

【解决方案2】：

您可以将导航栏置于 android 栏下方。如果您正在使用您知道状态栏大小的特定设备，我只会这样做。否则使用https://reactnative.dev/docs/statusbar

例子

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

【讨论】：