如何使用 React Native 去除 android 上状态栏上的黑色覆盖

Posted 2023-04-18

【中文标题】如何使用 React Native 去除 android 上状态栏上的黑色覆盖

【英文标题】：How to remove black overlay on status bar on android with React Native

【发布时间】：2019-08-11 14:05:55

【问题描述】：

我正在学习 React Native（没有 React 知识），但我的问题是状态栏总是有一个半透明的黑色背景，我可以将其删除。我尝试了每个 *** 答案，甚至 React Native 和 Expo 文档。但是什么都没有……

这是我的问题：

状态栏应该有一个白色背景，并得到这个灰色覆盖，这就是我想要删除的。

这是我的代码：

render() 
    return (
         <View>
             <StatusBar background="white" />
             <Button title="Sign in!" onPress=this._signInAsync />
         </View>
    );

我什至在 app.js 上尝试过这个

"androidStatusBar": 
    "backgroundColor": "#C2185B"
,

我开始想，这和世博有关。

【问题讨论】：

在我的两台较旧的 Android 设备上，StatusBar 背景颜色有效。在我的 OP 6T 上，它只显示灰色条。无论我做什么，模拟器上的 iPhoneXR 都是透明的。即使我不情愿地接受现代 Android 上的灰色条，我也很难找到适用于所有设备的可接受设置。我想出的最好的方法是将 backgroundColor 设置为白色（我的应用程序有白色背景）并将图标设置为深色。灰色条上的 Android OP 6T 看起来很糟糕，因为它是灰色条上的黑色图标，但我现在必须忍受它。

【参考方案1】：

如果你想有白色的状态栏然后使用下面的代码：

render() 
return (
  <View style=styles.container>
    <StatusBar backgroundColor='white' barStyle="dark-content" />
    <Text style=styles.welcome>Welcome to Pradnya's</Text>
    <Text style=styles.instructions>To get started, edit App.js</Text>
    <Text style=styles.instructions>instructions</Text>
  </View>
);

在上面的代码中，"backgroundColor" 将状态栏颜色更改为白色，barStyle="dark-content" 将文本颜色设置为黑色，如下所示：

如果您想将背景颜色设置为“红色”，则更改 barstyle="light-content" 将在输出下方显示：

这应该可以解决您的问题..

【讨论】：

我尝试了这个和其他建议，但仍然无法正常工作。会不会是因为 Expo 或 react-navigation？

文档说“Expo 在 Android 上默认使状态栏为半透明，这与 ios 一致，更符合材料设计。不幸的是，某些库不支持半透明状态栏，例如 - 导航库，提供标题栏等的库。” docs.expo.io/versions/latest/guides/configuring-statusbar 看来您已经尝试过了，但如果没有，此链接将为您提供一些信息。

我的结论是，由于我使用的插件，特别是 react-navigation 和 expo 的结合，什么都做不了。

有人对此有所了解吗？理论上反应导航和状态栏之间应该没有冲突，但我在这里看到了确切的问题。我可以设置一个带有背景颜色的空白视图，但它会获得 android 灰色加上我的颜色的“混合”颜色。

【参考方案2】：

您可以使用StatusBar的隐藏功能将其隐藏。

<View>
  <StatusBar backgroundColor="blue" barStyle="light-content" />
  <View>
    <StatusBar hidden=route.statusBarHidden />
    ...
  </View>
</View>

更多信息请参见here。

请留下评论以获取更多评论。

【讨论】：

感谢您的帮助，但这隐藏了我的状态栏。我希望它可见，但没有黑色透明背景

您可以在状态栏中使用translucent 属性来帮助您在状态栏下绘制您的应用程序，这样您就可以通过给出高度为20 的视图来设置自己的颜色，然后您可以根据您的要求自定义颜色。