ios - react redux

La forma correcta de navegar con React Native, Redux y Navigator

Question

Tengo una aplicación React Native usando el framework Redux y estoy usando el componente Navigator para manejar la navegación. He tenido algunos problemas para que la navegación funcione y no puedo encontrar ningún buen ejemplo de cómo hacerlo correctamente, así que estoy buscando ayuda y aclaración.

Aquí está la esencia de lo que tengo actualmente, que funciona, pero no sé si lo estoy haciendo bien:

Componente raíz

...
renderScene(route, navigator) {
    console.log(''RENDER SCENE'', route);
    const Component = route.component;
    return (
        <Component navigator={navigator} route={route} {...this.props} />
    )
}

render() {
    return (
        <Navigator
            renderScene={(route, nav) => this.renderScene(route, nav)}
            initialRoute={{ name: ''Signin'', component: Signin }} />
    )
}

Componente Signin

...
componentWillReceiveProps(nextProps) {
    if (!this.props.signedIn && nextProps.signedIn) {
        console.log(''PUSHING TO MAIN'');
        nextProps.navigator.push({ name: ''Main'', component: Main });
    }
}

Preguntas:

1: Mi primer pensamiento aquí es que probablemente debería mover el código navigator.push a una acción. Sin embargo, ¿es el componentWillReceiveProps adecuado para llamar a la acción componentWillReceiveProps ? Cuando se carga el componente Signin , se inicia una acción para iniciar sesión en el usuario si ya tienen una sesión activa. De manera predeterminada, no están registrados, por lo tanto, cuando lleguen los próximos apoyos, verifico si cambió y luego presiono Main .

2: en el registro de mi consola inmediatamente después de registrar ''PUSH TO MAIN'', veo dos registros ''RENDER SCENE'':

[info] ''RENDER SCENE'', { name: ''Signin'', component: [Function: Signin] } (EXPECTED)
[info] ''PUSHING TO MAIN''
[info] ''RENDER SCENE'', { name: ''Signin'', component: [Function: Signin] } (WHY?)
[info] ''RENDER SCENE'', { name: ''Main'', component: [Function: Main] }

Tengo curiosidad por saber por qué RENDER SCENE se llama dos veces (la primera es el componente Signin ) si solo estoy presionando el componente Main .

También originalmente en el método componentWillReceiveProps solo estaba revisando:

if (nextProps.signedIn) {
    nextProps.navigator.push({ name: ''Main'', component: Main });
}

pero esto causó que el componente Main se empujara dos veces.

Answer 1

NOTA: El enlace de GitHub a continuación ahora está en desuso, en los comentarios el autor sugirió react-native-router-flux que es del mismo autor.

Acabo de agregar soporte para Redux, con mi nuevo componente https://github.com/aksonov/react-native-redux-router hace que la navegación sea bastante fácil, como llamar a Actions.login

Answer 2

1) Sí, muévelo al método, el componentWillReceiveProps probablemente no sea correcto. Es difícil refaccionar esa parte para usted, ya que no tendría esa lógica de ese método en ese componente, es decir, el signinComp debería recibir el estado de si tiene una sesión de autenticación o no (y no resolverlo por sí mismo). Lleva a que se procese sin ningún motivo; ya que si él está conectado, lo redirige. Yo personalmente verificaría eso en renderScene, dado que el navegador se pasa, puedes hacer push / pop en los componentes secundarios y manejar toda tu lógica en un renderScene.

2) Vea la pila de navegación como una baraja de cartas. Cuando configuras la escena, es una carta, pero cuando la presionas agrega otra a la pila. Por lo tanto, cuando empuja y tiene dos tarjetas, comprueba que todas las tarjetas estén boca arriba y renderizadas, de modo que cuando presiona hacia atrás o hacia atrás, vuelva a la tarjeta o escena completa. Imagina empujando 5 escenas inmediatamente a la pila. Entonces, cuando cambias la pila, verifica que todo esté renderizado y listo para ese botón. Personalmente, no me parece óptimo (pero tiene que hacerlo ya que puede pasar diferentes propiedades con cada escena que empuja).

Probablemente puedas cambiar esta línea a:

    renderScene={this.renderScene}

Answer 3

Esta no es una implementación reducida, pero para el enrutamiento encontré que react-native-router-flux es realmente útil.

Puedes hacer cosas como llamar

Actions.login 

para navegar a la vista de inicio de sesión. Las rutas se definen en su archivo de índice y tienen esquemas opcionales para definir los elementos de la barra de navegación.

react-native-router-flux

Answer 4

Pregunta 1:
Recomiendo que procese la lógica del navegador en el método shouldComponentUpdate, como a continuación,

   shouldComponentUpdate(nextProps, nextState){

    if(nextProps.isLoggedIn != this.props.isLoggedIn && nextProps.isLoggedIn === true){
        //will redirect
        // do redirect option

        return false;
    }

    return true;
}

La pregunta 2:
Creo que este es el error de reaccionar nativo.