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

有關更多信息，請參見此處

請發表評論以獲得進一步評論。