React-native-router-flux: Defina o navigationBarStyle dinamicamente no gancho do ciclo de vida de uma cena

Da mesma forma, estou tentando usar um botão direito dinâmico na barra de navegação que renderiza uma folha de ação com ações que dependem de dados. Pense ... Follow userABC123 ; Block userABC123 ; etc. Existe uma maneira de gerar dinamicamente a função onRight dentro de um gancho de ciclo de vida (ou seja, depois que os dados são buscados) para produzir uma folha de ação personalizada?

Sim, você pode atualizar adereços por meio de Actions.refresh (). Exemplo:
Actions.refresh ({renderRightButton: this._renderRightButton});
https://github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.md

@sheparddw está correto. Da mesma forma, você pode atualizar navigationBarStyle com Actions.refresh({navigationBarStyle ... }) .

Onde você deve colocar a chamada Actions.refresh ()?
Quando coloco a chamada de atualização em minha ação de fluxo (que é chamada quando deveria haver uma mudança no estilo), ela apenas atualiza o estilo da barra de navegação na guia atualmente selecionada. Quando eu mudo as guias, ele reverte para o estilo antigo.

O único componente que atualiza sempre que eu alterno as guias é minha barra de guias, então tentei colocar a atualização em meu componente Tabbar em componentWillReceiveProps ou componentWillUpdate . Então eu obtenho recursão infinita porque toda vez que é atualizado, Tabbar recebe novos adereços e se atualiza novamente.

@aksonov você se importaria de comentar sobre isso?

Eu estava brincando com Actions.refresh em meu componente, mas não acho que essa seja a maneira correta de atualizar dinamicamente as propriedades da cena. Aqui estão minhas descobertas.

// Observação: estou usando uma classe es6 que estende Component

Se colocarmos Actions.refresh ({title: 'drawer'}); no construtor, então reaja reclamando com isto:

Aviso: setState (...): Não é possível atualizar durante uma transição de estado existente (como em render ou no construtor de outro componente). Os métodos de renderização devem ser uma função pura de adereços e estado; os efeitos colaterais do construtor são um antipadrão, mas podem ser movidos para componentWillMount .

Isso é apenas um aviso e alcançamos o resultado desejado. No entanto, há um efeito colateral - a função render é chamada duas vezes quando fazemos isso.

Se colocarmos isso diretamente na função componentWillMount, o react não emite nenhum aviso, mas o render também é chamado duas vezes.

Se fizermos isso no construtor:
this.props.navigationState.title = 'test';

então reaja não reclamará e nosso título de NavigationBar será testado. O método render será chamado apenas uma vez. O mesmo vale para chamar onRight, onRightTitle etc. Agora a coisa está de acordo com este https://facebook.github.io/react/docs/jsx-spread.html#mutating -props-is-bad adereços mutantes é ruim.

Portanto, você pode alterar os adereços, o que é ruim, ou pode chamar Actions.refresh e ter efeitos colaterais, como renderizar o componente duas vezes ... Alguma ideia?

Alguma atualização sobre isso? Estou tendo exatamente o mesmo problema ao tentar definir o navigationBarStyle dinamicamente dependendo dos acessórios do usuário. Especificamente, estou tentando alterar a cor de fundo da barra de navegação. Actions.refresh({navigationBarStyle ... }) também não funciona.

<Scene key="myScene"
component={myComponent}
renderTitle={() => { return <NavigationBarTitle title="My Title"/>}}
sceneStyle={styles.scene}
navigationBarStyle={[styles.navBar, this.props.theme.backgroundColor]} <- backgroundColor não é atualizado quando o estado muda
onRight={this.pushNoticeFilter}/>

Consegui renderizar dinamicamente títulos e estilos diferentes em meu componente de título personalizado da barra de navegação, mas navigationBarStyle não está ouvindo as mudanças de estado.

Isso tem algo a ver com RNRF ignorando re-renderizações de cenas, onde imprime "Key myScene is already defined!"?

@mikaelrosquist @compojoom Estou usando o redux para armazenar os "temas" que

import React, { Component } from 'react';
import { NavBar } from 'react-native-router-flux';
import Variables from 'market/app/styles/base';

class CircllyNavBar extends Component {
  render() {
    return (
      <NavBar {...this.props} navigationBarStyle={{ backgroundColor: Variables.BRAND_PRIMARY() }} />
    )
  }
}

export default CircllyNavBar;

<Scene key="search_form" title="Search"
    component={SearchForm}
    navBar={CircllyNavBar} />

@OhaiBBQ Obrigado! Funciona perfeitamente! 👍

@mikaelrosquist Sem problemas. Outra coisa que achei interessante (como sou novo no React), é que você pode definir os adereços padrão de uma cena RNRF usando a propriedade de classe defaultProps de um componente React.

class Scene extends RNRFScene { }

Scene.defaultProps = {
  navBar: CircllyNavBar
};