欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解react native頁(yè)面間傳遞數(shù)據(jù)的幾種方式

 更新時(shí)間:2018年11月07日 10:12:02   作者:toringo  
這篇文章主要介紹了詳解react native頁(yè)面間傳遞數(shù)據(jù)的幾種方式,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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

應(yīng)用場(chǎng)景:

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

代碼如下:

A頁(yè)面

 componentDidMount() {
 // 利用DeviceEventEmitter 監(jiān)聽(tīng) concactAdd事件
  this.subscription = DeviceEventEmitter.addListener('concactAdd', (dic) => {// dic 為觸發(fā)事件回傳回來(lái)的數(shù)據(jù)
   // 接收到 update 頁(yè)發(fā)送的通知,后進(jìn)行的操作內(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頁(yè)面

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

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

A頁(yè)面

// 定義路由跳轉(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)選擇人員頁(yè)面
  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頁(yè)面

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

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

在A頁(yè)面路由失去焦點(diǎn)的時(shí)候觸發(fā)該事件

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

那么問(wèn)題來(lái)了, 為何不在頁(yè)面卸載(componentWillunmount)的時(shí)候觸發(fā)該事件?

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

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • react?redux及redux持久化示例詳解

    react?redux及redux持久化示例詳解

    這篇文章主要為大家介紹了react?redux及redux持久化示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-08-08
  • React之防止按鈕多次點(diǎn)擊事件?重復(fù)提交

    React之防止按鈕多次點(diǎn)擊事件?重復(fù)提交

    這篇文章主要介紹了React之防止按鈕多次點(diǎn)擊事件?重復(fù)提交問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • React 中常用的幾種路由跳轉(zhuǎn)方式小結(jié)

    React 中常用的幾種路由跳轉(zhuǎn)方式小結(jié)

    基本路由跳轉(zhuǎn)是最常見(jiàn)的一種方式,下面介紹React 中常用的幾種路由跳轉(zhuǎn)方式,感興趣的朋友一起看看吧
    2023-12-12
  • React UI組件庫(kù)ant-design的介紹與使用

    React UI組件庫(kù)ant-design的介紹與使用

    Ant Design是阿里螞蟻金服團(tuán)隊(duì)基于React開(kāi)發(fā)的ui組件,主要用于中后臺(tái)系統(tǒng)的使用,這篇文章主要介紹了React UI組件庫(kù)ant-design的介紹與使用,需要的朋友可以參考下
    2023-12-12
  • react native仿微信PopupWindow效果的實(shí)例代碼

    react native仿微信PopupWindow效果的實(shí)例代碼

    本篇文章主要介紹了react native仿微信PopupWindow效果的實(shí)例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下
    2017-08-08
  • React Native之TextInput組件解析示例

    React Native之TextInput組件解析示例

    本篇文章主要介紹了React Native之TextInput組件解析示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-08-08
  • React hooks使用方法全面匯總

    React hooks使用方法全面匯總

    這篇文章主要介紹了react hooks實(shí)現(xiàn)原理,文中給大家介紹了useState dispatch函數(shù)如何與其使用的Function Component進(jìn)行綁定,實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2022-10-10
  • webpack構(gòu)建react多頁(yè)面應(yīng)用詳解

    webpack構(gòu)建react多頁(yè)面應(yīng)用詳解

    這篇文章主要介紹了webpack構(gòu)建react多頁(yè)面應(yīng)用詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-09-09
  • React中的useState和setState的執(zhí)行機(jī)制詳解

    React中的useState和setState的執(zhí)行機(jī)制詳解

    這篇文章主要介紹了React中的useState和setState的執(zhí)行機(jī)制,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • React Native自定義組件與輸出方法詳解

    React Native自定義組件與輸出方法詳解

    這篇文章主要給大家介紹了關(guān)于React Native自定義組件與輸出方法的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2018-07-07

最新評(píng)論