web-dev-qa-db-fra.com

Est-il possible de changer la couleur de la barre d'état Android avec React Native?

Je viens tout juste de commencer à utiliser React Native pour Android et j'essaie de déterminer s'il est possible de modifier la couleur de la barre d'état pour Android ...

Comme ça?

 enter image description here

androidreact-native
23
russjr08

J'ai créé un paquet npm pour contrôler la barre d'état dans Android

https://www.npmjs.com/package/react-native-Android-statusbar

Les changements de couleur ne reflètent pas pour les versions antérieures à 21

4
Nishanth Shankar

Vous pouvez utiliser la barre d'état réactif natif (description détaillée ici ). Tout ce que vous avez à faire est d’envelopper le navigateur avec une vue et d’ajouter un composant StatusBar au-dessus de celui-ci. N'oubliez pas d'importer StatusBar à partir du package 'react-native'.

<View>
  <StatusBar
    backgroundColor="blue"
    barStyle="light-content"
  />
  <Navigator
    initialRoute={{statusBarHidden: true}}
    renderScene={(route, navigator) =>
      <View>
        <StatusBar hidden={route.statusBarHidden} />
         ...
      </View>
    }
  />
</View>

Une chose que j'ai remarquée est que vous devriez appeler la vue parent avec flex: 1, sans cela, vous verrez simplement un écran blanc. Ce n'est pas mentionné dans RN Documents cependant.

27
eden

Il n’existe actuellement aucun moyen de le faire à partir de JS. Vous pouvez le personnaliser en utilisant un thème personnalisé. Extraire le fichier Android/src/main/res/values/styles.xml de votre projet (le modèle se trouve ici: https://github.com/facebook/react-native/blob/master/local-cli/generator-Android/templates/src/app/src/main/ res/values ​​/ styles.xml ) et lisez-en davantage ici: https://developer.Android.com/training/material/theme.html

4
kzzzf

Ajoutez ce code sur votre composant en-tête

androidStatusBarColor="#34495e"
3
Andrien Pecson

Il n'y a pas d'API exposée pour l'instant. Cela fonctionnera uniquement à partir d'Android 5.0 . Travailler sur un module de pont pour obtenir le même résultat. Vous tiendrons au courant

2
Nishanth Shankar

Si vous utilisez Expo for React Native, voici la solution pour configurer la couleur de la barre d'état Android.

Tout d'abord, dans votre fichier app.json, ajoutez le code:

{
  "expo": {
    "sdkVersion": "Your given Version",
    "androidStatusBar": {
       "backgroundColor": "#4e2ba1" (Your desirable Android Status Bar Color before the app loads)
    }
   }    
}

Et puis allez dans votre composant principal ou App.js, importez 'StatusBar' de 'react-native'. Ajoutez ensuite le code suivant en retour:

return(
   <View style={{flex: 1}}>  (Do not forget to style flex as 1)
      <StatusBar translucent backgroundColor="rgba(0,0,0,0.2)"/>
      <Your Code>
   </View>
);

Ici, nous définissons la couleur de la barre d'état sur Noir mais avec une opacité de 0,2. Votre couleur statusBar sera identique à votre couleur d'arrière-plan headerStyle pour Stack Navigator mais un peu plus sombre. Pour les applications Android standard, voici comment définir la couleur de StatusBar. Faites aussi en sorte que votre application soit dessinée sous la barre d'état et ait l'air agréable.

J'espère que cela fonctionne parfaitement pour vous.

1
Abiral Subedi

Oui, vous pouvez:

import {StatusBar} from 'react-native';
componentDidMount(){
StatusBar.setBarStyle( 'light-content',true)
    StatusBar.setBackgroundColor("#0996AE")

}

0
Ahmad Moussa