如何使用React Native删除Android上状态栏上的黑色叠加层

Question

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

这是我的问题：

状态栏应该是白色背景，并获得此灰色叠加层，这是我想要删除的。

这是我的代码：

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

我甚至在app.js上试过这个

"androidStatusBar": {
    "backgroundColor": "#C2185B"
},

我开始想，这与世博会有关。

Answer 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”：

这应该解决你的问题..

Answer 2

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

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

有关更多信息，请参见此处

请发表评论以获得进一步评论。