react-native - example - react native vs ionic

Reaccionar datos de Pase Nativo entre vistas de hermanos

Question

Estoy desarrollando una aplicación simple de la lista de tareas pendientes utilizando React Native, mi problema es el siguiente: tengo un NavigatorIOS en la raíz de mi proyecto, con un componente que contiene un ListView como ruta inicial y un botón de la barra de navegación que lleva a una vista de creación de tareas.

Una vez que se ha creado una nueva tarea, la vista se abre para que se muestre el ListView. Estoy tratando de agregar mi tarea recién creada a este ListView (su fuente de datos está contenida en el estado del componente).

¿Cómo realizar tal operación, cuál es la buena práctica? Yo usaría un delegado en la aplicación nativa pura pero aquí, ambas vistas son manejadas por la instancia de NavigatorIOS.

index.ios.js

addTask() {
    console.log("Test");
},

render() {
        return (
            <React.NavigatorIOS
                ref="nav"
                style={styles.container}
                tintColor="#ED6063"
                initialRoute={{
                    title: "Tasks",
                    component: TasksList,
                    rightButtonTitle: ''Add'',
                    onRightButtonPress: () => {
                        this.refs.nav.navigator.push({
                            title: "New task",
                            component: NewTask,
                            passProps: {
                                onTaskAdded: this.addTask
                            },
                            leftButtonTitle: "Cancel"
                        });
                    }
                }}/>
        );
    }

NuevoTask.js

taskAdded() {
console.log("Added: " + this.state.title + " - " + this.state.description);
this.props.onTaskAdded({
    title: this.state.title,
    description: this.state.description
});
this.props.navigator.pop();
}

TareasList.js

var dataSource = new ListView.DataSource({
    rowHasChanged: (r1, r2) => r1 !== r2
});
this.state = {
    dataSource: dataSource.cloneWithRows(data)
};

Puedes encontrar el código fuente completo aquí .

Answer 1

Debe volver a escribir la función de su constructor para obtener los datos de una forma dinámica. Luego, cuando la página se vuelve a cargar, obtendría los datos correctos que incluyen la nueva tarea. Aquí obtiene los datos de una matriz estática, que no cambiaría.

Guarde la lista de tareas en el archivo local o Firebase, y lea cuando construya.

Answer 2

La documentación React-Native tiene una breve sección sobre los enfoques para la comunicación entre componentes .

Cuando intenta hacer algo más complicado que una relación padre-hijo / madre / hijo / madre / padre / madre, hay algunas opciones:

1. Patrón de gestor . Para las comunicaciones entre hermanos verdaderos <-> (es decir, cuando los dos hermanos comparten un padre a través de la composición), puede hacer que el padre administre el estado. Por ejemplo, puede tener un widget <MyConsole> que tiene un <TextInput> y un <ListView> contiene las entradas anteriores de un usuario, ambos son hijos del widget <Console> .

   • Aquí, el <Console> puede actuar como administrador. Cuando <TextInput> cambia su valor, puede usar el evento onChangeText para pasar el nuevo valor hasta el componente primario <MyConsole> , que luego actualiza su estado y lo pasa a sus hijos.

2. Patrón de evento (publicación-suscripción) . Recuerde que los componentes son solo objetos, por lo que puede usar enfoques orientados a objetos para comunicarse entre componentes. Los documentos de React señalan que:

   Para la comunicación entre dos componentes que no tienen una relación padre-hijo, puede configurar su propio sistema de eventos global. Suscríbase a eventos en componentDidMount (), cancele la suscripción a componentWillUnmount () y llame a setState () cuando reciba un evento.

   • Aquí, puede usar una biblioteca de publicación-suscripción simple como pubsub.js para que cuando un componente cambie solo publique el cambio y otros componentes relacionados puedan escuchar el evento y actualizarse ellos mismos. Esto puede ser un enfoque muy eficaz para aplicaciones más pequeñas.

3. Patrón de flujo . Uno de los inconvenientes de un sistema de publicación / suscripción puro es que resulta difícil hacer un seguimiento del estado. Por ejemplo, si tiene 2 componentes (por ejemplo, EditTitle, EditBody) que pueden actualizar algún estado como un mensaje de correo electrónico, entonces un sistema de eventos puros termina transmitiendo diferentes versiones de estado alrededor de las cuales puede complicarse con los conflictos porque no hay "solo Versión de la verdad ". Aquí es donde entra en juego el enfoque de flujo de React. Con el flujo, los componentes actualizan un almacén de datos responsable de actualizar y reconciliar los datos (por ejemplo, EmailDataStore ), y la tienda luego notifica a los componentes el estado actualizado.

   • Por lo tanto, en su ejemplo, la vista de tareas emitiría una actualización (por ejemplo, mediante publicación o invocación directa de la función) a un TasksDataStore , que luego podría publicar un evento como tasks-updated para sus suscriptores. Tanto el panel de tareas como el panel de resultados se suscribirían al almacén de datos.

Al configurar las suscripciones, es mejor agregar las suscripciones después de que el componente se monte y definitivamente eliminarlas antes de que el componente se desmonte (de lo contrario, terminará con una gran cantidad de suscripciones huérfanas).