最近在用RN仿半糖app的時候，發(fā)現(xiàn)半糖有個小細(xì)節(jié)做的感覺挺不錯的。用戶初次進入到app內(nèi)的時候，tabbar的‘我的’圖標(biāo)來源是一張導(dǎo)入的圖片文件。然后當(dāng)用戶再點擊"我的"頁面的時候，開始請求網(wǎng)絡(luò)數(shù)據(jù)，再獲得用戶頭像的url的時候，實時得也刷新了底部tabbar的"我的"圖標(biāo)的來源,這時候不再使用工程內(nèi)的文件，而是網(wǎng)絡(luò)加載頭像url。具體如圖。

初次進入app.png

通知刷新tabbar后.png

實現(xiàn)

1.半糖的ios應(yīng)用在實現(xiàn)這個小細(xì)節(jié)是應(yīng)該是使用了NSNotificationcenter,然后我在想RN的通知該去怎么實現(xiàn)，后來百度到 DeviceEventEmitter 。

2.DeviceEventEmitter在RN內(nèi)的發(fā)送和接受消息。例如：

A頁面注冊通知：

import  {DeviceEventEmitter} from 'react-native';
//…
//調(diào)用事件通知
DeviceEventEmitter.emit('xxxName’,param);
//xxxName:通知的名稱 param：發(fā)送的消息（傳參）

B頁面接收通知：

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

    //  use param do something
    });
}
//xxxName:通知的名稱    param:接收到的消息（傳參）

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

//在componentWillUnmount 內(nèi)需要我們手動移除通知

3.知道DeviceEventEmitter的簡單使用后，我們開始在RN版的半糖開始實現(xiàn)我們需要的小功能吧。

我的頁面在獲取到用戶數(shù)據(jù)后：

  //注冊監(jiān)聽事件，時間名稱：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，調(diào)用setState 方法，刷新狀態(tài)機，這時候?qū)崟r的刷新了‘我的’圖標(biāo)

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

2017-04-18 11_39_08.gif