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的方法。

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

经理模式。对于真正的兄弟姐妹通信（即两个兄弟姐妹通过作曲共享父母的情况），您可以让父母管理该州。例如，您可能有<MyConsole>窗口小部件，其中<TextInput>和<ListView>包含用户过去的输入，两者都是<Console>窗口小部件的子项。
- 此处，<Console>可以充当经理。当<TextInput>更改其值时，您可以使用onChangeText事件将新值传递给父<MyConsole>组件，然后更新其状态并将其传递给其子项。< / LI>
事件（发布 - 订阅）模式。请记住，组件只是对象，因此您可以使用面向对象的方法在组件之间进行通信。 React文件指出：

对于没有父子关系的两个组件之间的通信，您可以设置自己的全局事件系统。订阅componentDidMount（）中的事件，取消订阅componentWillUnmount（），并在收到事件时调用setState（）。
- 在这里，您可以使用像pubsub.js这样的简单发布 - 订阅库，这样当一个组件发生更改时，它就会发布更改，其他相关组件可以监听事件并自行更新。对于较小的应用程序，这可能是一种非常有效的方法。
通量模式。纯发布/订阅系统的缺点之一是，难以跟踪状态。例如，如果你有两个组件（例如EditTitle，EditBody），它们都可以像电子邮件一样更新某些状态，那么纯粹的事件系统最终会传递不同版本的状态，因为没有＆＃ 34;单一版本的真相＆＃34;。这就是React的flux approach进来的地方。使用flux，组件更新数据存储，负责更新和协调数据（例如EmailDataStore），然后商店通知更新的组件州。
- 因此，在您的示例中，任务视图会向TasksDataStore发出更新（例如，通过发布或直接函数调用），然后tasks-updated可能会向其订阅者发布{{1}}之类的事件。任务面板和结果面板都将订阅数据存储。

设置订阅时，最好在组件安装后添加订阅，并在组件卸载之前明确删除它们（否则最终会导致大量的孤立订阅）。

Answer 2

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

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

在兄弟视图之间反应Native Pass数据

2 个答案: