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

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