web-dev-qa-db-ja.com

Android with React Nativeの場合）のステータスバーの黒いオーバーレイを削除する方法

私はReactネイティブ（React知識なし）を学習していますが、ステータスバーは常に半透明の黒い背景を取得し、それを削除できます。すべてのstackoverflowの答えを試し、さらにReact NativeおよびExpoのドキュメントです。しかし何も...

これが私の問題です： enter image description here

ステータスバーの背景はおそらく白で、この灰色のオーバーレイが表示されます。これを削除します。

これが私のコードです：

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

私もapp.jsでこれを試しました

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

私は考え始めています、これはエキスポに関連しています。

androidreact-nativeexpostatusbar
8
rafaelmorais

白いステータスバーが必要な場合は、以下のコードを使用してください：

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"は以下の出力のようにテキストの色を黒に設定します。

enter image description here

また、背景色を「赤」に設定する場合は、出力の下に表示されるbarstyle = "light-content"を変更します。

enter image description here

これで問題が解決します。

3
Pradnya Choudhari

StatusBarの非表示機能で非表示にすることができます。

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

詳細は here を参照してください。

さらなるコメントのためにコメントを残してください。

1
hong developer