web-dev-qa-db-fra.com

Comment supprimer la superposition noire sur la barre d'état sur Android avec React Native

J'apprends React Native (sans React connaissances), mais mon problème est que la barre d'état a toujours un fond noir translucide et je peux le supprimer. Je essayé chaque réponse stackoverflow, et même React Documentation native et Expo. Mais rien ...

Voici mon problème: enter image description here

La barre d'état a un fond blanc soi-disant, et obtenez cette superposition grise, c'est ce que je veux supprimer.

Voici mon code:

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

J'ai même essayé ça, sur app.js

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

Je commence à penser que c'est lié à l'Expo.

androidreact-nativeexpostatusbar
8
rafaelmorais

Si vous souhaitez avoir une barre d'état blanche, utilisez le code ci-dessous:

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>
);

}

dans le code ci-dessus, "backgroundColor" changera la couleur de la barre d'état en blanc et barStyle = "dark-content" mettra la couleur du texte en noir comme ci-dessous.

enter image description here

et si vous voulez définir la couleur d'arrière-plan pour supposer "rouge", changez barstyle = "light-content" qui s'affichera en dessous de la sortie:

enter image description here

Cela devrait résoudre votre problème.

3
Pradnya Choudhari

Vous pouvez le cacher avec la fonction cachée de StatusBar.

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

Voir ici pour plus d'informations.

Veuillez laisser un commentaire pour plus de commentaires.

1
hong developer