詳解reactnative頁面間傳遞數(shù)據(jù)的幾種方式

1. 利用react-native 事件DeviceEventEmitter 監(jiān)聽廣播

站在用戶的角度思考問題,與客戶深入溝通,找到橫縣網(wǎng)站設計與橫縣網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗,讓設計與互聯(lián)網(wǎng)技術結(jié)合,創(chuàng)造個性化、用戶體驗好的作品,建站類型包括:成都做網(wǎng)站、網(wǎng)站建設、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、國際域名空間、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務覆蓋橫縣地區(qū)。

應用場景:

- 表單提交頁面, A頁面跳轉(zhuǎn)到B頁面選人, 然后返回A頁面, 需要將B頁面選擇的數(shù)據(jù)傳回A頁面。
- 多個多媒體來回切換播放,暫停后二次繼續(xù)播放等問題。

代碼如下:

A頁面

 componentDidMount() {
 // 利用DeviceEventEmitter 監(jiān)聽 concactAdd事件
  this.subscription = DeviceEventEmitter.addListener('concactAdd', (dic) => {// dic 為觸發(fā)事件回傳回來的數(shù)據(jù)
   // 接收到 update 頁發(fā)送的通知,后進行的操作內(nèi)容
   if (dic.approver_list) {
    this.setState((preState: Object) => {
     this.updateInputValue(preState.approver_list.concat(dic.approver_list), 'approver_list');
     return { approver_list: preState.approver_list.concat(dic.approver_list) };
    });
   }
   if (dic.observer_list) {
    this.setState((preState: Object) => {
     this.updateInputValue(preState.observer_list.concat(dic.observer_list), 'observer_list');
     return { observer_list: preState.observer_list.concat(dic.observer_list) };
    });
   }
  });
...
componentWillUnmount() {
  this.subscription.remove();
}

B頁面

// 觸發(fā)concactAdd事件廣播
handleOk = (names: []) => {
  const { field } = this.props;
  DeviceEventEmitter.emit('concactAdd', { [field]: names });
 }

2. 用react-navigation提供的路由之間

A頁面

// 定義路由跳轉(zhuǎn)函數(shù) cb表示需要傳遞的回調(diào)函數(shù)
export const navigateToLinkman = (cb: Function, type?: string, mul?: boolean): NavigateAction =>
 NavigationActions.navigate({ routeName: 'Linkman', params: { cb, type, mul } });
 // 跳轉(zhuǎn)選擇人員頁面
  handleSelectUser = () => {
   Keyboard.dismiss();
   this.props.actions.navigateToLinkman(this.selectedUser, '', true);
...
// 選擇人員后的回調(diào)函數(shù)
selectedUser = (selectUser: string[]) => {
   this.setState((preState) => {
    const newEmails = preState.emails.concat(selectUser);
    const emails = [...new Set(newEmails)];
    return {
     emails,
    };
   });
  }

B頁面

handleToUser = () => {
  ...
  navigation.state.params.cb(user.email, group);
  ...
}

3. 利用react-navigation 提供的路由事件監(jiān)聽觸發(fā)事件

在A頁面路由失去焦點的時候觸發(fā)該事件

componentDidMount() { 
this.props.navigation.addListener('didBlur', (payload) => {
     if (this.modalView) this.modalView.close();
    });
  }

那么問題來了, 為何不在頁面卸載(componentWillunmount)的時候觸發(fā)該事件?

如果不了解react-native和react-navigation, 會很困惑, A頁面卸載了, 為什么還能接收到來自B頁面的數(shù)據(jù)或者事件, 原因是: react-navigation中, A頁面跳轉(zhuǎn)到B頁面, A頁面沒有卸載, 只是在它提供的路由棧中堆積,例如A跳轉(zhuǎn)到B中, A頁面不執(zhí)行componentWillunmount,當每一個路由pop掉的時候才會執(zhí)行componentWillunmount, 卸載掉當前頁面。

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。

標題名稱:詳解reactnative頁面間傳遞數(shù)據(jù)的幾種方式
文章來源:http://muchs.cn/article22/ihgdjc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供域名注冊、營銷型網(wǎng)站建設、電子商務定制開發(fā)、網(wǎng)站設計公司、軟件開發(fā)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設