最近在用RN仿半糖app的時候鸭津，發(fā)現(xiàn)半糖有個小細節(jié)做的感覺挺不錯的蛾派。用戶初次進入到app內(nèi)的時候吩翻，tabbar的‘我的’圖標來源是一張導入的圖片文件净蚤。然后當用戶再點擊"我的"頁面的時候海蔽，開始請求網(wǎng)絡(luò)數(shù)據(jù)共屈，再獲得用戶頭像的url的時候，實時得也刷新了底部tabbar的"我的"圖標的來源,這時候不再使用工程內(nèi)的文件党窜，而是網(wǎng)絡(luò)加載頭像url拗引。具體如圖。
初次進入app.png
通知刷新tabbar后.png
實現(xiàn)
1.半糖的ios應用在實現(xiàn)這個小細節(jié)是應該是使用了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的刷新了‘我的’圖標
//最后別忘了移除通知
componentWillUnmount(){
this.listener.remove();
}
2017-04-18 11_39_08.gif
