React-native-router-flux: Cor do botão Voltar

Criado em 20 jun. 2016 · 14Comentários · Fonte: aksonov/react-native-router-flux

Versão

Diga-nos quais versões você está usando:

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

Comportamento esperado

Estou tentando mudar a cor da seta como na imagem abaixo. No entanto, não consigo definir uma cor em cada cena. Eu só posso fazer isso na cena raiz. Estou faltando alguma coisa ou é um bug?

Funciona com este código quando o estou configurando para a cena raiz.

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

Gostaria de definir cada estilo de cena separadamente (como este código). É mesmo possível

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

Fonte

Shakarang

Comentários muito úteis

Você poderia tentar o seguinte @Shakarang

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

sercanov em 22 jun. 2016

👍39 🎉1

Todos 14 comentários

Em cada cena, você pode dar backButtonTextStyle={{ ... }}

281330 em 20 jun. 2016

Tentei adicioná-lo à cena com estas propriedades:

cor
cor de fundo
tintColor

Mas não funciona ..

Shakarang em 21 jun. 2016

Você poderia tentar o seguinte @Shakarang

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

sercanov em 22 jun. 2016

👍39 🎉1

Você sempre pode detalhar:
node_modules / react-native-router-flux / src / back_chevron.png

e edite "back_chevron.png" como quiser.

JaiNatha em 1 jun. 2017

Oh, desculpe, eu interpretei mal seu comentário inicial, apenas percebi que você está tentando defini-lo para cada cena.

leftButtonIconStyle = {{tintColor: 'green'}} é realmente o caminho a percorrer

JaiNatha em 1 jun. 2017

Isso não está funcionando no meu projeto.

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

precisa atualizar a cor do ícone de volta.

indu127pal em 21 jul. 2017

👍5

Mesmo problema, em RNRF 4.0.0-beta.15 não está funcionando leftButtonIconStyle, nem barButtonIconStyle

jaimecorrea em 2 ago. 2017

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

Isso funciona para mim em [email protected]

jordenchang55 em 9 ago. 2017

👍24 ❤8 🎉6

headerTintColor parece correto, mas e quanto ao tamanho? ou, se quisermos um ícone de volta diferente?

Frexuz em 7 nov. 2017

Verifique aqui o estilo de sua barra de navegação.
Se você quiser mudar o ícone, você pode usar leftButtonImage ou renderBackButton prop na cena.

jordenchang55 em 7 nov. 2017

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

assim?

renderBackButton não é uma função

Atualizar:

renderBackButton={() => <Icon name='chevron-left' />} isso renderiza a seta corretamente, mas não faz nada quando pressionado ..

Nós realmente temos que reimplementar a funcionalidade de volta por conta própria?

Frexuz em 7 nov. 2017

👍1

@Frexuz Esse é um problema com o qual estou lutando agora também. Tudo o que quero é usar algo como um ícone de pacote para os botões de navegação, em vez de uma imagem ou texto.

Parece que temos que reimplementar a funcionalidade on-touch (provavelmente roteamento) para cada cena (ou seja, onRight / onLeft não faz nada se você escolher usar renderBackButton ou renderRightButton).