2
votes

Changer la barre de navigation sur Android avec RN avec expo?

J'ai commencé à utiliser React Native avec Expo et j'ai rencontré mon premier problème. Je souhaite changer la couleur de la barre de navigation sur Android. Malheureusement, je ne peux pas comprendre comment faire cela.

J'ai essayé d'utiliser https://github.com/thebylito/react-native-navigation-bar-color#readme mais il affiche l'erreur suivante:

TypeError: TypeError: null n'est pas un objet (évaluation de 'NavigationBarColor.changeNavigationBarColor')

if (Platform.OS == 'android') {
  changeNavigationBarColor('#f00', true);
}

android reactjs react-native expo

3 commentaires

Avez-vous installé 'react-native-navigation-bar-color'?

Avez-vous importé changeNavigationBarColor from 'react-native-navigation-bar-color' ?

oui, react-native-navigation-bar-color est installé, lié et importé

4 Réponses :

1
votes

Avez-vous installé 'react-native-navigation-bar-color'?

Si non

npm install react-native-navigation-bar-color --save
react-native link react-native-navigation-bar-color

Avez-vous importé changeNavigationBarColor depuis 'react-native-navigation-bar-color'?

Sinon, import changeNavigationBarColor from 'react-native-navigation-bar-color';

Le nom de la couleur n'est pas clair. un exemple de couleur

import NavigationBar from 'react-native-navbar-color'

export default class App extends Component {
    componentDidMount() {
        NavigationBar.setColor('#ffab8e')
    }
...

utilisez reac-native-navigation-bar-color:

example = async () => {
      try{
        if (Platform.OS == 'android') {
          const response = await changeNavigationBarColor('#ffffff');
          console.log(response)// {success: true}
          }
      }catch(e){
          console.log(e)// {success: false}
      }

  };
...
<Button
          title="Set color white"
          onPress={() => {
            this.example();
          }}
        />

SI non, je vous suggère d'essayer un autre module. react-native-navbar-color

npm install --save react-native-navbar-color
react-native link react-native-navbar-color

Example.js

white : "#ffffff" , black : "#000000"

Description du module

9 commentaires

oui, react-native-navigation-bar-color est installé, lié et importé. J'ai essayé de changer la couleur en '#ffffff' et toujours la même erreur

@WojciechBorowski a mis à jour ma réponse. Vous pouvez essayer mon code de réponse

même problème avec async null is not an object (evaluating 'NavigationBarColor.changeNavigationBarColor') - node_modules/react-native-navigation-bar-color/src/index.js:‌8:23 in changeNavigationBarColor

Pouvez-vous essayer ça? import {changeNavigationBarColor} de 'react-native-navigation-bar-color';

j'obtiens une erreur différente (0, _reactNativeNavigationBarColor.changeNavigationBarColor) is not a function. (In '(0, _reactNativeNavigationBarColor.changeNavigationBarColor)('#f‌fffff')', '(0, _reactNativeNavigationBarColor.changeNavigationBarColor)' is undefined)

@WojciechBorowski J'ai trouvé un autre module pour vous aider. Veuillez vous référer à la réponse.

même problème TypeError: null n'est pas un objet (évaluation de 'NavigationBar.setColor')

Je pense que quelque chose n'est pas installé correctement. Consultez la page d'accueil du module pour voir s'il en manque.

c'est peut-être parce que j'utilise le workflow géré par Expo?

0
votes

Ce module ne fonctionne pas avec Expo. Assurez-vous de récupérer le fichier READ ME pour tout module que vous souhaitez installer avec Expo.

Si vous voyez que l'étape d'installation nécessite « nom du module de lien natif de réaction », cela ne fonctionnera probablement pas avec Expo à moins qu'il ne soit déjà inclus / pré-emballé dans la version du SDK Expo que vous avez.

J'ai appris ma leçon à la dure.

0 commentaires

1
votes

Cette fonctionnalité a été fusionnée dans expo le 9 août. Vous devez ajouter ces directives à app.json

{
  "androidNavigationBar": {
     /*
        Determines to show or hide bottom navigation bar.
        "true" to show, "false" to hide.
        If set to false, status bar will also be hide. As it's a general rule to hide both status bar and navigation bar on Android developer official docs.
      */
    "visible": BOOLEAN,
    /*
      Configure the navigation bar icons to have light or dark color.
      Valid values: "light-content", "dark-content".
    */
    "barStyle": STRING,

    /*
      Configuration for android navigation bar.
      6 character long hex color string, eg: "#000000"
    */
    "backgroundColor": STRING
  }
}

Voici la demande de tirage avec plus d'informations https://github.com/expo/expo/pull/5280

2 commentaires

Oui, cela aide, mais nous ne pouvons toujours pas le rendre transparent ou modifier les options lorsque l'application est en cours d'exécution.

Pour obtenir plus de contrôle à ce stade , vous devez éjecter ( docs.expo.io/versions/v35.0.0/workflow/customizing ) pour pouvoir lier un module natif tel que react-native-navigation-bar-color. Vous ne pourrez pas utiliser de module devant être lié à expo. Vous pouvez également demander cette fonctionnalité ici expo.canny.io/feature-requests

0
votes

J'ai essayé de nombreuses réponses dans les forums mais je n'ai pas trouvé de solution de travail. Enfin, ci-dessous a fonctionné pour moi et le fera pour vous si vous utilisez la dernière RN 0.62 https://reactnative.dev/docs/navigation

Vous pouvez également définir l'arrière-plan de l'en-tête au lieu de backgroundColor. Voici mon code:

export default function App() {

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
            name="Home"
            component={Main}
            options={{ title: 'Welcome', headerStyle: {
              backgroundColor: '#e7305b'
           } }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

0 commentaires