Как убрать чёрный оверлей в строке состояния на андроиде с помощью React Native

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"
},

Я начинаю думать, этосвязан с Expo.

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>

См. здесь для получения дополнительной информации.

Пожалуйста, оставьте комментарий для дальнейшего комментария.