React-native-router-flux: Color del botón de retroceso

Creado en 20 jun. 2016 · 14Comentarios · Fuente: aksonov/react-native-router-flux

Versión

Díganos qué versiones está utilizando:

react-native-router-flux v3.30.0
react-native v0.27.2

Comportamiento esperado

Estoy tratando de cambiar el color de la flecha como se muestra en la siguiente captura de pantalla. Sin embargo, no puedo establecer un color en cada escena. Solo puedo hacerlo en la escena raíz. ¿Me estoy perdiendo algo o es un error?

Funciona con este código cuando lo configuro en la escena raíz.

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

Me gustaría configurar cada estilo de escena por separado (como este código). ¿Es siquiera posible?

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

Fuente

Shakarang

Comentario más útil

¿Intentarías lo siguiente @Shakarang?

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

sercanov en 22 jun. 2016

👍39 🎉1

Todos 14 comentarios

En cada escena, puedes dar backButtonTextStyle={{ ... }}

281330 en 20 jun. 2016

Intenté agregarlo en la escena con estas propiedades:

color
color de fondo
tintColor

Pero no funciona ...

Shakarang en 21 jun. 2016

¿Intentarías lo siguiente @Shakarang?

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

sercanov en 22 jun. 2016

👍39 🎉1

Siempre puede profundizar en:
módulos_nodo / react-native-router-flux / src / back_chevron.png

y edite "back_chevron.png" como desee.

JaiNatha en 1 jun. 2017

Oh, lo siento, leí mal tu comentario inicial, me acabo de dar cuenta de que estás tratando de configurarlo para cada escena.

leftButtonIconStyle = {{tintColor: 'green'}} es de hecho el camino a seguir

JaiNatha en 1 jun. 2017

Esto no funciona en mi proyecto.

Versión
"reaccionar": "16.0.0-alpha.12",
"react-native": "^ 0.46.3",
"react-native-router-flux": "^ 4.0.0-beta.12"

necesita actualizar el color del icono.

indu127pal en 21 jul. 2017

👍5

El mismo problema, en RNRF 4.0.0-beta.15 no funciona leftButtonIconStyle, ni barButtonIconStyle

jaimecorrea en 2 ago. 2017

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

Esto me funciona en [email protected]

jordenchang55 en 9 ago. 2017

👍24 ❤8 🎉6

headerTintColor parece correcto, pero ¿qué pasa con el tamaño? o, si queremos un icono de retroceso diferente?

Frexuz en 7 nov. 2017

Consulte aquí para diseñar su barra de navegación.
Si desea cambiar el ícono, puede usar leftButtonImage o renderBackButton prop en la escena.

jordenchang55 en 7 nov. 2017

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

¿como esto?

renderBackButton no es una función

Actualizar:

renderBackButton={() => <Icon name='chevron-left' />} esto representa la flecha correctamente, pero no hace nada cuando se presiona.

¿Realmente tenemos que volver a implementar la funcionalidad de la espalda nosotros mismos?

Frexuz en 7 nov. 2017

👍1

@Frexuz Este es un problema con el que estoy luchando ahora también. Todo lo que quiero es usar algo como un ícono de paquete para los botones de navegación, en lugar de una imagen o texto.

Parece que tenemos que volver a implementar la funcionalidad táctil (lo más probable es que el enrutamiento) nosotros mismos para cada escena (es decir, onRight / onLeft no hace nada si elige usar renderBackButton o renderRightButton).