一旦创建了新的任务,该视图就会弹出,以便显示ListView.我试图将我新创建的任务添加到此ListView(其数据源包含在组件状态中).
如何执行这样的操作,有什么好的做法？我将使用纯native应用程序中的委托,但在这里,这两个视图都由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)
};
当您尝试做一些比parent-> child或child->父关系更复杂的事情时,有几个选项：
>经理模式对于真正的兄弟姐妹通信(即两个兄弟姐妹通过组合共享父母的地方),您可以让父母管理该状态.例如,您可能拥有< MyConsole>具有< TextInput>的小部件和< ListView>包含用户的过去输入,都是< Console>的子项.小部件.
>这里,<控制台>可以担任经理.当< TextInput>更改其值时,可以使用onChangeText事件将新值传递到父< MyConsole>组件,然后更新其状态并将其传递到其子节点.
>事件(发布 – 订阅)模式.请记住,组件只是对象,因此您可以使用面向对象的方法来在组件之间进行通信.反应文件指出：
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这样的简单的发布订阅库,以便当一个组件更改时,它只会发布更改,而其他相关组件可以监听事件并进行更新.这对于较小的应用程序来说可能是一个非常有效的方法.
>通量图.纯发行/订阅系统的缺点之一是变得难以跟踪状态.例如,如果您有两个组件(例如EditTitle,EditBody)可以更新某些状态,如电子邮件消息,则纯事件系统最终会通过不同版本的状态,由于没有“单个”版本的真相“.这是React的flux approach进入的地方.通过流量,组件更新负责更新和协调数据(例如EmailDataStore)的数据存储,然后存储器通知组件更新状态.
>所以在你的例子中,任务视图将发布一个更新(例如通过发布或直接函数调用)到TasksDataStore,然后可以把一个类似任务的事件发布给订阅者.任务面板和结果面板都将订阅数据存储.
