React-native-router-flux: Couleur du bouton retour

Créé le 20 juin 2016 · 14Commentaires · Source: aksonov/react-native-router-flux

Version

Dites-nous quelles versions vous utilisez :

réagir-natif-routeur-flux v3.30.0
réagir natif v0.27.2

Comportement attendu

J'essaie de changer la couleur de la flèche comme la capture d'écran ci-dessous. Cependant, je ne peux pas définir une couleur sur chaque scène. Je ne peux le faire que sur la scène racine. Est-ce que j'ai raté quelque chose ou c'est un bug ?

Cela fonctionne avec ce code lorsque je le configure sur la scène racine.

<Router >
   <Scene key="root" titleStyle={{ color: 'red' }} barButtonIconStyle={{ tintColor: 'green' }}>
      <Scene key="connexion" component={Connexion}
         hideNavBar={false} title="Connexion" initial={true}/>
      <Scene key="signup" component={Signup} hideNavBar={false}
         title="PageOne" navigationBarStyle={NavBarStyle.bar.darkNavigationBar}
      />
   </Scene>
</Router>

Je voudrais définir chaque style de scène séparément (comme ce code). Est-ce même possible

<Router >
   <Scene key="root" titleStyle={{ color: 'red' }}>
     <Scene key="connexion" component={Connexion}
       hideNavBar={false} title="Connexion" initial={true}/>
     <Scene key="signup" component={Signup} hideNavBar={false}
       title="PageOne" navigationBarStyle={NavBarStyle.bar.darkNavigationBar}
       barButtonIconStyle={{ tintColor: 'green' }}
      />
    </Scene>
</Router>

Source

Shakarang

Commentaire le plus utile

Voudriez-vous essayer ce qui suit @Shakarang

<Scene ... leftButtonIconStyle = {{ tintColor:'red'}} />

sercanov le 22 juin 2016

👍39 🎉1

Tous les 14 commentaires

Dans chaque scène, vous pouvez donner backButtonTextStyle={{ ... }}

281330 le 20 juin 2016

J'ai essayé de l'ajouter dans la scène avec ces propriétés :

Couleur
Couleur de l'arrière plan
teinteCouleur

Mais ça ne marche pas..

Shakarang le 21 juin 2016

Voudriez-vous essayer ce qui suit @Shakarang

<Scene ... leftButtonIconStyle = {{ tintColor:'red'}} />

sercanov le 22 juin 2016

👍39 🎉1

Vous pouvez toujours explorer :
node_modules/react-native-router-flux/src/back_chevron.png

et éditez "back_chevron.png" comme vous le souhaitez.

JaiNatha le 1 juin 2017

Oh désolé, j'ai mal lu votre commentaire initial, je viens de réaliser que vous essayez de le définir pour chaque scène.

leftButtonIconStyle={{ tintColor: 'green' }} est en effet la voie à suivre

JaiNatha le 1 juin 2017

Cela ne fonctionne pas dans mon projet.

Version
"react": "16.0.0-alpha.12",
"react-native": "^0.46.3",
"react-native-router-flux": "^4.0.0-beta.12"

besoin de mettre à jour la couleur de l'icône.

indu127pal le 21 juil. 2017

👍5

Même problème, sur RNRF 4.0.0-beta.15 ne fonctionne pas leftButtonIconStyle, ni barButtonIconStyle

jaimecorrea le 2 août 2017

<Scene
    key="root"
    headerTintColor="#000"
>

Cela fonctionne pour moi sur [email protected]

jordenchang55 le 9 août 2017

👍24 ❤8 🎉6

headerTintColor semble correct, mais qu'en est-il de la taille ? ou, si nous voulons une autre icône arrière ?

Frexuz le 7 nov. 2017

Vérifiez ici pour le style de votre barre de navigation.
Si vous voulez changer d'icône, vous pouvez utiliser leftButtonImage ou renderBackButton prop dans la scène.

jordenchang55 le 7 nov. 2017

                      <Scene
                        key='HomePage'
                        component={HomePage}
                        renderBackButton={<Icon name='chevron-left' />}
                      />

comme ça?

renderBackButton n'est pas une fonction

Mettre à jour:

renderBackButton={() => <Icon name='chevron-left' />} cela rend la flèche correctement, mais il ne fait rien lorsqu'il est pressé..

Devons-nous vraiment ré-implémenter nous-mêmes les fonctionnalités de retour ?

Frexuz le 7 nov. 2017

👍1

@Frexuz C'est aussi un problème avec bats maintenant. Tout ce que je veux, c'est utiliser quelque chose comme une icône de package pour les boutons de navigation, plutôt qu'une image ou un texte.

Il semble que nous devions réimplémenter nous-mêmes la fonctionnalité tactile (probablement le routage) pour chaque scène (c'est-à-dire que onRight/onLeft ne fait rien si vous choisissez d'utiliser renderBackButton ou renderRightButton).