如何使用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>

有关更多信息，请参见here。

请发表评论以供进一步评论。