React-native-router-flux: Forzar re-renderizar escena después de pop

Gracias por tu respuesta pero no funciona;)
No actualiza la vista anterior ...

Supongo que debería actualizarlo si algo cambia dentro de su estado. Así que establezca un valor aleatorio dentro de la actualización

El 09 de abril de 2016, a las 09:51, rtrompier [email protected] escribió:

Gracias por tu respuesta pero no funciona;)
No actualiza la vista anterior ...

-
Estás recibiendo esto porque estás suscrito a este hilo.
Responda a este correo electrónico directamente o véalo en GitHub https://github.com/aksonov/react-native-router-flux/issues/465#issuecomment -207737400

¿Alguien podría decirme cómo actualizar después de Actions.pop ()?

Nuevamente, debe cambiar el estado del componente anterior para que se actualice. Así es como funciona la API NavigationExperimental.

@aksonov Tengo el mismo problema que @ helloworld123456 y @rtrompier . Mi flujo de navegación tiene el siguiente aspecto:

Escena A => Escena B => Escena C

Cuando paso de C a B, necesito volver a renderizar la Escena B. Veo que @ Elyx0 ha sugerido usar Actions.pop(); Actions.refresh(); Tengo dos preguntas:

1. ¿Llamar a Actions.refresh() rerenderá la escena C o B?
2. ¿Es posible anular el controlador onPress del botón Atrás en la barra de navegación? No parece que sea posible después de mirar el código.

1. Debería actualizar B, pero ¿por qué no lo prueba y lo averigua?
2. Use renderBackButton para pasar su propio botón de retroceso, personalizado onPress y todo.

Entendido, gracias

@samdturner, ¿puedes decirme cómo?

Gracias

@ alfan2305

Actions.pop();
Actions.refresh();

¿qué pasa dentro del navBar ? ¿No deberíamos tener un refresh=true en el Scene ? De lo contrario, tengo que anular onPress para backButton a una función que llame a las dos llamadas anteriores.

@ssomnoremac ¿Qué hay de malo en anular el botón? Bastante simple de hacer. Si este problema fuera más popular, diría que agregamos la funcionalidad, pero parece ser un caso marginal.

@cridenour Creo que va más allá del alcance de esta pregunta tener la capacidad de volver a renderizar una escena en el cambio de ruta. En mi caso, quiero volver de una secuencia de registro y restablecer el estado del registro en mi tienda Redux activando una acción para volver a renderizar en lugar de conectar el restablecimiento al botón Atrás. ¿Existe una mejor manera de lograr esto?

Creo que su componente de registro recibiría el cambio al escuchar redux, ¿no es así? ¿O el problema es que la escena no se vuelve a renderizar después de recibir nuevos accesorios cuando otro componente descansa en la parte superior?

Quiero decir que proporcionamos un onBack por lo que la definición de la escena de registro debe ser tan simple como

const refreshOnBack = () => { Actions.pop(); Actions.refresh(); }

...
<Scene key="registration" component={Registration} onBack={refreshOnBack} />
...

gracias, no sabía acerca de onBack ya que uso el ejemplo detallado como mis documentos.

No hay problema. Definitivamente, eche un vistazo a https://github.com/aksonov/react-native-router-flux/blob/master/docs/API_CONFIGURATION.md ya que hay mucha flexibilidad para cuando se sale del libro :)

Hola chicos,
En primer lugar: gracias a todos por sus conocimientos, son realmente útiles, ya que soy bastante novato en la codificación de react y javascript.

Acabo de probar la solución "refreshOnBack" de @cridenour : desafortunadamente, encontré algunas dificultades.

Ahora el botón simplemente no hace nada. Me quedo en mi escena "C" (refiriéndome al ejemplo de @ssomnoremac ) incluso si el botón se resaltó. Si solo configuro:
const refreshOnBack = () => { Actions.pop(); }
Tengo el comportamiento esperado sin una actualización de mi vista principal.

Qué me estoy perdiendo ? : /

Tengo los mismos resultados que @Brokray

Si depura de forma remota, ¿ve un error en la consola?

@cridenour no hay errores en la consola.
¿Hay algo que pueda iniciar sesión en la consola para averiguar qué está pasando? ¿Algo del reductor tal vez?
El reductor sigue siendo un misterio para mí.

Gracias.

¡Mmm! Quizás intente hacer la actualización primero.

Actions.refresh({key: 'yourSceneKey'}); Actions.pop();

Gracias por tu ayuda @cridenour : Acabo de probar tu idea, pero lamentablemente tampoco funciona. Paso de C a B sin problemas pero "B" no cambió.
Parece que el problema proviene del método refresh() : incluso si pongo un botón de actualización en la escena 'B' (llamando a Actions.refresh() ) no pasa nada.

@jholton No sé si puede ayudarte, pero encontré una forma personalizada de actualizar mi escena:
Tengo un reductor para cada escena (B y C), cuando llamo a mi acción POST en 'C', ambos reductores captan la llamada, C hace lo que debe hacer y B establece una variable de estado ' actualizar 'a true .
De esta manera, en el "ComponentWillReceiveProps" de B, pruebo 'actualizar' y llamo de nuevo lo que necesito para actualizar la escena.

Si alguien tiene más información sobre el problema Actions.refresh() , ¡no lo dude!
Gracias.

@Brokray Es interesante que no funcionó, pero de todos modos tiene la mejor solución. No creo en intentar usar el sistema de navegación para pasar el estado de la aplicación; siempre me quedo con las tiendas de flujo.

@Brokray, si no es demasiado problema, ¿puede

@cridenour Sí, no quiero pasar el estado de la aplicación per se. Solo quiero que la escena B vuelva a renderizarse.
En la escena B, muestro algunos datos de la base de datos. En la escena C, tengo un formulario que agrega datos a la base de datos. Cuando el usuario vuelve a la escena B, solo quiero que se activen todos los métodos del ciclo de vida (por ejemplo, getInitialState, componentWillMount, etc.) para que los datos recién agregados se recuperen y se muestren. Esos métodos de ciclo de vida no se activan.

@jholton Correct, y eso es por diseño de React, para bien o para mal. Le sugiero que pruebe una implementación de flujo (a mucha gente le gusta redux, yo personalmente uso Alt) y administre los datos allí. De esa manera, cuando actualice los datos, el componente se volverá a renderizar (esto significa volver a ejecutar render() ) y no dependerá de la inicialización del componente. Muchos problemas de reacción en React se vuelven mucho más fáciles una vez que aleja la capa de datos de los componentes (y estos simplemente leen datos y se muestran).

Dicho esto, Actions.refresh () solo causará nuevos accesorios y una re-renderización (nuevamente, solo render() ) pero no llamará a componentWillMount, etc.

@jholton Bueno, como dijo @cridenour , uso una implementación de flujo (redux de hecho) que le permite administrar sus datos a través de acciones, estado y reductor. Una vez que esté familiarizado con la implementación de flux, ¡con gusto le proporcionaré un ejemplo!
@cridenour ¡ Gracias de nuevo por su ayuda!

@Brokray Sí, ahora me

¿Tendré éxito en los accesorios actualizados, pero cuando intento pasar a la siguiente vista nuevamente, me da un error?
este código está escrito en mi pantalla de configuración
Actions.pop ();
Actions.refresh ({clave: 'pageOne', nombre: 'wwwww'});

Solo esto funcionará y actualizará la vista, pero cuando intento volver a ir a la pantalla de configuración, me da un error

¿Lo resolveré finalmente llamando a la actualización vacía con accesorios después de la demora?
Actions.popTo ('pageOne');
setTimeout (() => {
Actions.refresh ({nombre: 'zzzzar'});
console.log ("zzzz");
}, 10);

@washaq : Eso me sirvió

@ ronyv89 glade funciona para https://github.com/facebook/react-native/issues/9280 "

Actions.pop (); Actions.refresh ();
simplemente actualice la página pero no va a la escena anterior.

Sería bueno si se pudieran prometer métodos de Acciones para que pueda encadenarlos como

Actions.pop().then(Actions.refresh()).

o

Actions.pop().refresh()

@israrhnrtech y @tuneZola no funciona si desea llamar a la actualización de la anterior, luego debe llamarlo después de la demora y luego se llamará correctamente así

Actions.pop();
setTimeout(() => {
Actions.refresh({name:'zzzzar'});
console.log("zzzz");
}, 10);

En primer lugar, gracias por la respuesta @tuneZola y @washaq .
Acciones ('pageOne');
setTimeout (() => {
Actions.refresh ({nombre: 'zzzzar'});
console.log ("zzzz");
}, 10);

este código está funcionando muy bien ..
gracias de nuevo ..

@israrhnrtech no hay problema, amigo, encuentro que realmente muchos golpes y rastros jajaja se ve simple, pero cuando eres nuevo en reaccionar nativo y no sabes cómo hacerlo, entonces es una historia diferente :)

Estoy enfrentando este mismo problema, en mis escenas:

A => B

en BI cambie el estado de mi tienda redux, pero cuando hago un Router.pop() , componentWillReceiveProps no se activa en A.

Mi router.pop vive localmente dentro de la página B (sin usar la barra de navegación predeterminada), por lo que

Router.pop()
Router.refresh()

no funciona, establecer un tiempo de espera tampoco funciona, ¿alguna idea sobre cómo lograrlo?

Solo actualizaré cuando pase los accesorios que desea cambiar, es decir

Actions.pop();
setTimeout(() => {
Actions.refresh({name:'zzzzar'});
console.log("zzzz");
}, 10);

en esto, paso el nombre como accesorios en mi vista principal, lo que significa que si estoy usando this.props.name para actualizar el texto, entonces está actualizado, debe pasar el estado actualizado como accesorios en la actualización porque así es como la vista sabe que está actualizada.
Espero que esto te ayudará

Para mí, la aplicación de esto funcionó:
navigator.replacePreviousAndPop (ruta anterior);

@phpscrpt , ¿puedes

@israrhnrtech lo siento, es para el componente Navigator integrado de react-native. Si react-native-router-flux se hereda del componente Navigator de alguna manera, puede funcionar.

@washaq La solución de tiempo de espera, como se implementa a continuación, no me funciona:

backAndRefresh () {

Actions.pop ();
setTimeout (() => {
Actions.refresh ({nombre: 'zzzzar'});
console.log ("zzzz");
}, 10);

}

VOLVER Y ACTUALIZAR

No se está llamando al componentDidMount en la página que quiero actualizar.

¿Me estoy perdiendo de algo?

¡Gracias!

@ivansifrim , ¿encontraste una solución para esto?
También estamos tratando de encontrar una forma de activar una acción después de aterrizar en la pantalla.

Esto me funciona: Actions.pop ({refresh: {}});
Aparece la pantalla actual y actualiza la pantalla principal.

@JeroenNelen - Todavía no lo he hecho, pero intentaré lo que sugirió @Bertjuhh

¿Alguna solución al problema mencionado?

Esto me está funcionando bien:

const refreshOnBack = () => { Actions.pop({ refresh: {} }); }
...
// child scene
<Scene key="settings" component={SettingsScreen} onBack={refreshOnBack}/>
...

En una aplicación simple que hice recientemente, he trabajado en esto de esta manera (este código está en el archivo de mi enrutador encima de la exportación):

Actions.pop = () => Actions.NAME_OF_PREVIOUS({ type: ActionConst.RESET });

Tendrá que hacer algo de lógica condicional en la función que está usando para anular pop . Funcionó maravillosamente en mi caso (concedido que no me importa la transición hacia atrás alternativa mientras uso ActionConst.RESET ). Rápido desagradable.

¿Hay finalmente algo que funcione bien aquí? Ninguna de las proposiciones anteriores funciona realmente ...

+1

@ivansifirm debería estar funcionando la última vez que lo usé, recuerde que en el paso de actualización los accesorios que desea anular, es decir, el 'nombre' anterior son los accesorios que quiero que actualice en mi vista anterior

mismo problema aquí, muy extraño.
a veces funciona, a veces no funciona.

Aquí está mi código. (En mi caso, hay escenas A y B, A => B navegando, B => A haciendo estallar)

Escena A:
componentWillReceiveProps(nextProps) { if (this.props.test !== nextProps.test) { this._getUser() // I need call this func after pop } }
Escena B

NavigationActions.pop({refresh:{test:true}})

Que pasa conmigo ?
Gracias.

NavigationActions.pop ({actualizar: {prueba: verdadero}})

puedes cambiarlo a

NavigationActions.pop ({actualizar: {prueba:! Prueba}})

El martes 20 de junio de 2017 a las 7:29 p.m., MobileStar [email protected]
escribió:

mismo problema aquí, muy extraño.
a veces funciona, a veces no funciona.

Aquí está mi código. (En mi caso, hay escenas A y B, A => B navegando,
B => A haciendo estallar)

Escena A:

componentWillReceiveProps (nextProps) {
if (this.props.test! == nextProps.test) {
this._getUser () // Necesito llamar a esta función después de pop
}
}

Escena B

NavigationActions.pop ({actualizar: {prueba: verdadero}})

Que pasa conmigo ?
Gracias.

-
Estás recibiendo esto porque estás suscrito a este hilo.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/aksonov/react-native-router-flux/issues/465#issuecomment-309945049 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/AExqB3CZM4U1yuwKslfuBj88uVVJulGtks5sGIAbgaJpZM4H_0pN
.

@nikitph Gracias por tu ayuda.
Sí, lo intenté.
Pero componentWillReceiveProps no se dispara siempre después de pop.
¿Podría informarme cuando se activa el componenteWillReceiveProps o hay otra función del ciclo de vida que se activa después del pop?
Saludos.

@SelfnessAid ahh ahora recuerdo por qué

Descubrí algo. Realmente no creo que esté limpio en absoluto, pero para mí hace el trabajo, así que aquí está. (Estoy usando Redux para hacer esto)

Necesitaba llamar a una función de recuperación cada vez que hacía un Action.scene() o Action.pop() . Esta búsqueda se llamó inicialmente en el método componentWillMount, pero como no se llama cuando se usa Action.pop() , cambié todas mis llamadas Action.scene() y Action.pop() a 2 funciones personalizadas que son acciones que significa que tengo más contenedores redux de los que normalmente debería, pero eh: /. Así que aquí están:

const goTo = (scene, label, sceneParams = {}, pushed = true) => ( // Equivalent of `Action.scene()`
   (dispatch) => {
     dispatch(setAppLabel(scene, label, sceneParams, pushed)); // I'm storing some infos about the scene in my store. Will be used in custom `pop()` later.
     mapSceneToAction(scene, dispatch, sceneParams); // // Calls the function initially used in the componentWillMount. I'll show a sample further
     Actions[scene](sceneParams);
   }
);

const pop = () => (  // Equivalent of `Action.pop()`
   (dispatch, getState) => {
     Actions.pop();
     mapSceneToAction(getState().sceneReducer.previousScene, dispatch, getState().sceneReducer.previousScene.itemProps); // Retrieving some infos stored in the store during `goTo()`
   }
);

Y así es como se ve mapSceneToAction ():

const mapSceneToAction = (scene, dispatch, itemProps) => {
  switch (scene) {
    case 'events':
      dispatch(fetchEvents()); // Or any other action :P
      break;
    case 'anyScene':
      dispatch(anyAction(withAnyParams));
      break;
    default:
  }
};

Es un poco complicado, pesado y probablemente no esté realmente limpio, pero desde que estoy usando este método, me las arreglé para solucionar todos los problemas que tenía.

Pasa un accesorio de función a la siguiente escena.
Actions.YourRoute ({onPress: () => setState ..});

Luego, en la siguiente escena, llame a la función prop
this.props.onPress ();

@ bethuel11 Esto está renderizando el componente en un bucle. Aunque no es una buena solución

Encontré un truco simple ...

estado actual / página actual =>

Actions.pop ();
setTimeout (() => {
Actions.refresh ({
isRefresh: verdadero,
});
}, 0);

estado / página anterior => dentro del render agregue la siguiente condición,

if (this.props.isRefresh) {
Actions.refresh ({
isRefresh: falso,
});
// si llamas a set state aquí, se volverá a entregar automáticamente ...
this.setState ({isloading: true});

Gracias.
}