Réagir données de passage natives entre des vues apparentées

je développe une application de liste de tâches simple en utilisant React Native, mon problème est le suivant: j'ai un NavigatorIOS à la racine de mon projet, avec un composant contenant un ListView comme route initiale, et un bouton de barre de navigation qui mène à une vue de création de tâche.

une fois qu'une nouvelle tâche a été créée, la vue est pop de sorte que le ListView s'affiche. J'essaie d'ajouter ma nouvelle tâche à cette ListView (sa source de données est contenue dans le component état.)

Comment effectuer une telle opération, quelle est la bonne pratique? j'utiliserais un délégué dans l'application native pure mais ici, les deux vues sont gérées par L'instance 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"
                        });
                    }
                }}/>
        );
    }

NewTask.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();
}

TasksList.js

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

Vous pouvez trouver le code source complet ici.

16
demandé sur Trilarion 2015-04-14 11:02:14

2 réponses

la documentation React-Native comporte une brève section sur les approches à la communication entre composants.

lorsque vous tentez de faire quelque chose de plus compliqué qu'une relation parent->enfant ou enfant->parent, il y a quelques options:

  1. Gestionnaire de modèle. Pour les véritables communications entre frères et sœurs (c'est-à-dire lorsque les deux frères et sœurs partagent un parent via la composition), vous pouvez demander au parent de gérer l'état. Par exemple, vous pourriez avoir un <MyConsole> widget qui a un <TextInput> et <ListView> contenant les entrées passées par un utilisateur, tous les deux sont des enfants de <Console> widget.

    • Ici <Console> peut agir comme gestionnaire. Lorsque l' <TextInput>modifie sa valeur, vous pouvez utiliser le onChangeText événement pour passer à la nouvelle valeur à la mère <MyConsole> component, qui met alors à jour son état et le transmet à son enfant.

  2. Événement (publish-subscribe) motif. Rappelez-vous que les composants ne sont que des objets, et vous pouvez donc utiliser des approches orientées objet pour communiquer entre les composants. Les documents React notent que:

    pour la communication entre deux composants qui n'ont pas de relation parent-enfant, vous pouvez configurer votre propre système d'événements global. S'inscrire aux événements dans componentDidMount (), se désabonner dans componentWillUnmount (), et call setState () lorsque vous recevez un événement.

    • ici, vous pouvez utiliser une bibliothèque simple publish-subscribe comme pubsub.js de sorte que lorsqu'un composant change, il ne fait que publier le changement et que les autres composants associés peuvent écouter l'événement et se mettre à jour eux-mêmes. Cela peut être une approche très efficace pour les petites applications.

  3. Flux de Flux. Un des inconvénients avec un pur publier/souscrire de système, il devient difficile de garder une trace de l'état. Par exemple, si vous avez 2 composants (par exemple EditTitle, EditBody) qui peuvent tous les deux mettre à jour un État comme un message e-mail, alors un système de concours complet pur finit par passer différentes versions de l'état autour de laquelle peut obtenir désordre avec des conflits parce qu'il n'y a pas de "version unique de la vérité". C'est là que Réagir flux approche vient dans. Avec flux, les composants mettent à jour un Data store qui est responsable pour la mise à jour et le rapprochement des données (par exemple EmailDataStore), et le magasin notifie alors les composants de l'état mis à jour.

    • ainsi, dans votre exemple, la vue des tâches émettrait une mise à jour (par exemple via publish, ou l'invocation directe de la fonction) vers un TasksDataStore, qui pourrait alors publier un événement comme tasks-updated pour ses abonnés. Le panel de tâches et le panel de résultats s'abonneraient au magasin de données.

lors de la mise en place des abonnements, il est préférable ajouter des souscriptions après le montage du composant et les supprimer définitivement avant que le composant ne soit démonté (sinon vous finissez avec beaucoup d'abonnements orphelins).

15
répondu tohster 2015-10-09 16:10:25

Vous devriez réécrire votre constructor fonction pour obtenir les données de manière dynamique. Ensuite, lorsque la page se recharge, elle obtient une donnée correcte qui inclut la nouvelle tâche. Ici vous obtenez les données d'un tableau statique, qui ne changerait pas.

sauvegarder la liste des tâches dans un fichier local ou dans une base de données locale, et lire quand construire.

0
répondu KChen 2015-10-04 02:14:49