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

Question

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

这是我的问题：

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

这是我的代码：

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

我什至在 app.js

上尝试过这个

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

我开始觉得，这跟世博会有关。

Answer 1

可以通过StatusBar的隐藏功能隐藏。

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

有关详细信息，请参阅 here。

请留下评论以便进一步评论。

Answer 2

如果你想要白色状态栏那么使用下面的代码：

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" 会将文本颜色设置为黑色，如下所示输出：

如果你想设置背景颜色假设 "red" 然后更改 barstyle="light-content" 将显示如下输出：

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

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

How to remove black overlay on status bar on android with React Native

android

statusbar

react-native

expo