1. 程式人生 > >ReactNative 用 通知 實現頁面重新整理

ReactNative 用 通知 實現頁面重新整理

在ReactNative 做移動端開發時,用TabNavigator實現標籤時,在兩個標籤之間切換時,無法實現頁面的重新整理。正如網上所提的問題: “如果2個tabbar 裡面的 list資料是對應的,比如 一個是 貨物list, 一個是 上架貨物的list , 在一個list裡面點選了某件貨物上架, 那應該在 上架貨物list裡面多一件,但發現tab之間的切換不會重新整理重讀頁面”。

這時,我們可以用“DeviceEventEmitter”這個ReactNative所提供的元件。

就拿上面那個問題 做例子:

首先,我們先在貨物list 和上架貨物list 頁面內新增:

import {
DeviceEventEmitter
, } from 'react-native';
componentDidMount(){

 DeviceEventEmitter.addListener('NoticeName', (value)=>{
             //這裡面是要呼叫的方法,比如:重新整理
             //value:是下面頁面在 通知 時 ,所傳遞過來的引數
 });
};

//在元件銷燬的時候將其移除

componentWillUnmount(){
       DeviceEventEmitter.remove();
};

然後我們在點開一個貨物後的,也就是貨物操作頁面,新增:

import {DeviceEventEmitter
,} from 'react-native';

在你操作完該貨物後,該貨物狀態改變後,新增

DeviceEventEmitter.emit('NoticeName',param);

這裡的param為你想傳遞的引數;name為上面貨物list和上架貨物list裡面的name,

這裡就是依靠這個NoticeName,來通知其他頁面中的DeviceEventEmitter.addListener中名字為NoticeName的監聽方法