React Native 在兄弟视图之间传递数据

Question

我正在使用 React Native 开发一个简单的待办事项列表应用程序，我的问题如下：我的项目根目录中有一个 NavigatorIOS，其中包含一个包含 ListView 作为初始路由的组件，以及一个导航栏按钮导致任务创建视图。

一旦创建了新任务，视图就会弹出以显示 ListView。我正在尝试将我新创建的任务添加到此 ListView（其数据源包含在组件状态中）。

如何执行这样的操作，有什么好的做法？我会在纯原生应用程序中使用委托，但在这里，两个视图都由 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)
};

您可以找到complete source code here。

Answer 1

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

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

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

   • 在这里，<Console> 可以充当经理。当 <TextInput> 更改其值时，您可以使用 onChangeText 事件将新值传递给父 <MyConsole> 组件，然后它会更新其状态并将其传递给其子组件。

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

   对于没有父子关系的两个组件之间的通信，可以设置自己的全局事件系统。在 componentDidMount() 中订阅事件，在 componentWillUnmount() 中取消订阅，并在收到事件时调用 setState()。

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

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

   • 因此，在您的示例中，任务视图将向TasksDataStore 发布更新（例如，通过发布或直接函数调用），然后可能会向其订阅者发布tasks-updated 之类的事件。任务面板和结果面板都将订阅数据存储。

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

Answer 2

您应该重写您的constructor 函数以动态方式获取数据。然后当页面重新加载时，它将获得包含新任务的正确数据。在这里，您从一个不会改变的静态数组中获取数据。

将任务列表保存到本地文件或Firebase，构建时读取。