React-native-router-flux: Establecer navigationBarStyle dinámicamente en el gancho del ciclo de vida de una escena

De manera similar, estoy buscando usar un botón derecho dinámico en la barra de navegación que muestra una hoja de acción con acciones que dependen de los datos. Piense ... Follow userABC123 ; Block userABC123 ; etc. ¿Hay alguna forma de generar dinámicamente la función onRight dentro de un gancho de ciclo de vida (es decir, después de que se obtienen los datos) para producir una hoja de acción personalizada?

Sí, puede actualizar los accesorios a través de Actions.refresh (). Ejemplo:
Actions.refresh ({renderRightButton: this._renderRightButton});
https://github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.md

@sheparddw es correcto. De la misma manera, puede actualizar navigationBarStyle con Actions.refresh({navigationBarStyle ... }) .

¿Dónde debería poner la llamada Actions.refresh ()?
Cuando pongo la llamada de actualización en mi acción de flujo (que se llama cuando debería haber un cambio en el estilo), solo actualiza el estilo de la barra de navegación en la pestaña seleccionada actualmente. Cuando cambio de pestaña, vuelve al estilo antiguo.

El único componente que se actualiza cada vez que cambio de pestaña es mi barra de pestañas, así que intenté poner la actualización en mi componente de la barra de pestañas en componentWillReceiveProps o componentWillUpdate . Luego obtengo una recursividad infinita porque cada vez que se actualiza, Tabbar obtiene nuevos accesorios y se actualiza nuevamente.

@aksonov, ¿te importaría comentar sobre esto?

Estaba jugando con Actions.refresh en mi componente, pero no creo que esta sea la forma correcta de actualizar dinámicamente las propiedades de la escena. Estos son mis hallazgos.

// Nota: estoy usando una clase es6 que extiende Component

Si colocamos Actions.refresh ({title: 'drawer'}); en el constructor, luego reaccionar se queja con esto:

Advertencia: setState (...): No se puede actualizar durante una transición de estado existente (como dentro de render o el constructor de otro componente). Los métodos de renderización deben ser una función pura de accesorios y estado; Los efectos secundarios del constructor son un anti-patrón, pero se pueden mover a componentWillMount .

Esto es solo una advertencia y logramos el resultado deseado. Sin embargo, hay un efecto secundario: la función de renderizado se llama dos veces cuando hacemos esto.

Si colocamos esto directamente en la función componentWillMount, entonces react no emite ninguna advertencia, pero también se llama a render dos veces.

Si hacemos esto en el constructor:
this.props.navigationState.title = 'test';

luego reaccionar no se quejará y nuestro título de la barra de navegación será probado. El método de render se llamará solo una vez. Lo mismo ocurre con las llamadas a onRight, onRightTitle, etc. Ahora la cosa está de acuerdo con esto https://facebook.github.io/react/docs/jsx-spread.html#mutating -props-is-bad mutar props es malo.

Entonces, puede mutar accesorios, lo cual es malo o puede llamar Actions.refresh y tener efectos secundarios, como renderizar el componente dos veces ... ¿Alguna idea?

¿Alguna actualización sobre esto? Estoy teniendo exactamente el mismo problema al intentar configurar dinámicamente navigationBarStyle dependiendo de los accesorios del usuario. Específicamente, estoy tratando de cambiar el color de fondo de la barra de navegación. Actions.refresh({navigationBarStyle ... }) tampoco funciona.

<Scene key="myScene"
component={myComponent}
renderTitle={() => { return <NavigationBarTitle title="My Title"/>}}
sceneStyle={styles.scene}
navigationBarStyle={[styles.navBar, this.props.theme.backgroundColor]} <- backgroundColor no se actualiza cuando cambia el estado
onRight={this.pushNoticeFilter}/>

Me las arreglé para representar dinámicamente diferentes títulos y estilos en mi componente de título personalizado de la barra de navegación, pero navigationBarStyle no está escuchando los cambios de estado.

¿Tiene esto algo que ver con que RNRF ignora las re-renderizaciones de escenas, donde imprime "Key myScene ya está definida"?

@mikaelrosquist @compojoom Estoy usando redux para almacenar los "temas" que obtengo del servidor. La forma más fácil que encontré de hacer estilos de barra de navegación dinámica para simplemente crear un componente contenedor.

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 ¡ Gracias! ¡Funciona perfectamente! 👍

@mikaelrosquist No hay problema. Otra cosa que encontré interesante (ya que soy nuevo en React) fue que puedes establecer los accesorios predeterminados de una escena RNRF usando la propiedad de clase defaultProps de un componente de React.

class Scene extends RNRFScene { }

Scene.defaultProps = {
  navBar: CircllyNavBar
};