最近在用RN仿半糖app的时候，发现半糖有个小细节做的感觉挺不错的。用户初次进入到app内的时候，tabbar的‘我的’图标来源是一张导入的图片文件。然后当用户再点击"我的"页面的时候，开始请求网络数据，再获得用户头像的url的时候，实时得也刷新了底部tabbar的"我的"图标的来源,这时候不再使用工程内的文件，而是网络加载头像url。具体如图。

初次进入app.png

通知刷新tabbar后.png

实现

1.半糖的ios应用在实现这个小细节是应该是使用了NSNotificationcenter,然后我在想RN的通知该去怎么实现，后来百度到 DeviceEventEmitter 。

2.DeviceEventEmitter在RN内的发送和接受消息。例如：

A页面注册通知：

import  {DeviceEventEmitter} from 'react-native';
//…
//调用事件通知
DeviceEventEmitter.emit('xxxName’,param);
//xxxName:通知的名称 param：发送的消息（传参）

B页面接收通知：

componentDidMount(){
    var self = this;
    this.listener =DeviceEventEmitter.addListener('xxxName',function(param){

    //  use param do something
    });
}
//xxxName:通知的名称    param:接收到的消息（传参）

componentWillUnmount(){
      this.listener.remove();
  }

//在componentWillUnmount 内需要我们手动移除通知

3.知道DeviceEventEmitter的简单使用后，我们开始在RN版的半糖开始实现我们需要的小功能吧。

我的页面在获取到用户数据后：

  //注册监听事件，时间名称：changeMine  传参：jsonData.avatar（头像url）
    DeviceEventEmitter.emit('changeMine',jsonData.avatar);

tabbar.js 文件:

componentDidMount(){

    var self = this;
    this.listener = DeviceEventEmitter.addListener('changeMine',function(url){
        self.setState({
          avatar:url
        })
    });

//通知开始，获取到url，调用setState 方法，刷新状态机，这时候实时的刷新了‘我的’图标

//最后别忘了移除通知
componentWillUnmount(){
      this.listener.remove();
  }

2017-04-18 11_39_08.gif