问题：不同Scene之间，如何保持数据一致性?后一个页面数据与前一个页面的数据有关联时，当后一个页面做个update操作并在navigator.pop()后，前一个页面的数据如何自动update？
场景：上图A界面显示了用户的头像，点击头像进入B界面，点击B界面的头像进入C界面，在C界面进行头像上传操作，头像上传完毕后，从C界面返回B界面时，此时B界面的头像要能自动更换成新的，同理再从B界面后退到A界面时，A界面的用户头像也必须是更新后的新头像。问题来了，界面的后退操作一般都是使用navigator.pop()，这个方法只实现后退，react-native官方文档上没显示navigator.pop()可以带参数做回调操作，那么要如何解决A、B界面在C界面做了更改头像后自动更新头像的操作呢？
## 解决方案1：
A界面进入B界面时，带上回调参数，如
this.props.navigator.push({‘id’:’b’,’callback’:this.refreshAAvatar}
在B界面进入C时，带上回调参数，如
this.props.navigator.push({‘id’:’c’,’callback’:this.refreshBAvatar});
在C界面完成修改操作后执行navigator.pop()之前执行
this.route.callback();即可让B界面完成刷新头像操作
在B界面点左上角的后退箭头时，判断是否有头像更新，有的话，调用this.route.callback()，通知A界面更新头像
通过页面之间做回调处理，似乎可以解决此类问题，但是当多个页面都需要做数据刷新操作时，这样的回调就很繁锁，而且左上角的后退按钮本来是一个很单一职责的操作，现在由于更新需要，要被“承担”更多的职责，明显提高了界面之间的耦合度，这样的设计处理不理想。
## 解决方案2：
借用DeviceEventEmitter的事件侦听处理机制，在A、与B页面的ComponentDidMount时，添加侦听器，在ComponentWillUnmount时删除侦听器
A界面：
import {DeviceEventEmitter} from 'react-native';
//…
componentWillUnmount(){
this.subscription.remove();
};
componentDidMount(){
this.subscription = DeviceEventEmitter.addListener('changeAvatar’,this.refreshAAvatar);
};
this.refreshAAvatar(data){
Console.warn(‘要更新的头像地址’,data);
};
B界面：
import {DeviceEventEmitter} from 'react-native';
//…
componentWillUnmount(){
this.subscription.remove();
};
componentDidMount(){
this.subscription = DeviceEventEmitter.addListener('changeAvatar’,this.refreshBAvatar);
};
this.refreshBAvatar(data){
Console.warn(‘要更新的头像地址’,data);
};
C界面：
import {DeviceEventEmitter} from 'react-native';
…
//当成功修改用户头像后，调用事件通知
DeviceEventEmitter.emit('changeAvatar’,avatarUrl);
在本解决方案中，A、B界面启用了侦听，当任何有修改头像时，只要修改者发送changeAvatar事件，就可以通知所有侦听changeAvatar事件的界面，是不是比解决方案1更简单？
网友评论