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

您在本机反应中有一个StatusBar模块 https://reactnative.dev/docs/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,
  },