react-native - React Native 在兄弟 View 之间传递数据

Question

我正在使用 React Native 开发一个简单的待办事项列表应用程序，我的问题如下:我的项目根目录中有一个 NavigatorIOS，其中包含一个包含 ListView 作为初始路由的组件，以及一个导航栏按钮，该按钮通向任务创建 View 。
一旦创建了新任务， View 就会弹出，以便显示 ListView。我正在尝试将我新创建的任务添加到此 ListView(其数据源包含在组件状态中)。
如何执行这样的操作，有什么好的做法？ 我会在纯原生应用程序中使用委托(delegate)，但在这里，两个 View 都由 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"
                        });
                    }
                }}/>
        );
    }

新任务.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();
}

任务列表.js

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

您可以找到 complete source code here .

Answer 1

React-Native 文档有一个关于 communicating between components 方法的简短部分。 .

当您尝试做一些比父->子或子->父关系更复杂的事情时，有几个选项:

经理模式 .对于真正的兄弟<->兄弟通信(即两个兄弟通过组合共享父)，您可以让父管理状态。例如，您可能有一个 <MyConsole>具有 <TextInput> 的小部件和 <ListView>包含用户过去的输入，两者都是 <Console> 的子级小部件。

在这里，<Console>可以担任经理。当<TextInput>更改其值，您可以使用 onChangeText 将新值传递给父级的事件 <MyConsole>组件，然后更新其状态并将其传递给其子代。

事件(发布-订阅)模式 .请记住，组件只是对象，因此您可以使用面向对象的方法在组件之间进行通信。 React 文档指出:

For communication between two components that don't have a parent-child relationship, you can set up your own global event system. Subscribe to events in componentDidMount(), unsubscribe in componentWillUnmount(), and call setState() when you receive an event.

在这里，您可以使用一个简单的发布-订阅库，如 pubsub.js这样当一个组件发生更改时，它只会发布更改，而其他相关组件可以监听事件并自行更新。对于较小的应用程序，这可能是一种非常有效的方法。

通量模式 .纯发布/订阅系统的缺点之一是，很难跟踪状态。例如，如果您有 2 个组件(例如 EditTitle、EditBody)，它们都可以像电子邮件消息一样更新某些状态，那么纯事件系统最终会传递不同版本的状态，这可能会因冲突而变得困惑，因为没有“单一真相版”。这就是 React 的 flux approach使用flux，组件更新负责更新和协调数据的数据存储(例如EmailDataStore)，然后存储通知组件更新状态。

因此，在您的示例中，任务 View 将向 TasksDataStore 发出更新(例如，通过发布或直接函数调用) ，然后可能会发布类似 tasks-updated 的事件给它的订阅者。任务面板和结果面板都将订阅数据存储。

设置订阅时，最好在组件挂载之后添加订阅，并在组件卸载之前将其删除(否则您最终会得到很多孤立的订阅)。