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

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)
};

您可以在此处找到完整的源代码.

Answer 1

React-Native文档简要介绍了组件之间的通信方法.

当你尝试做一些比父母 - >孩子或孩子 - >父母关系更复杂的事情时,有几个选择:

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

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

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

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

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

3. 通量模式.纯发布/订阅系统的缺点之一是,难以跟踪状态.例如,如果你有两个组件(例如EditTitle,EditBody),它们都可以像电子邮件一样更新某些状态,那么纯粹的事件系统最终会传递不同版本的状态,因为没有"单一"版本的真相".这就是React的通量方法的用武之地.使用flux,组件更新数据存储,负责更新和协调数据(例如EmailDataStore),然后存储通知组件更新状态.

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

在设置订阅时,最好在组件安装后添加订阅,并在组件卸载之前明确删除它们(否则最终会有大量的孤立订阅).

Answer 2

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

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