ReactNative中navigator.pop后如何实现数据更新

问题:不同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更简单?

推荐阅读更多精彩内容