1. 利用react-native 事件DeviceEventEmitter 監(jiān)聽廣播
站在用戶的角度思考問題，與客戶深入溝通，找到橫縣網(wǎng)站設(shè)計(jì)與橫縣網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都做網(wǎng)站、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、國際域名空間、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務(wù)覆蓋橫縣地區(qū)。
應(yīng)用場景：
- 表單提交頁面， A頁面跳轉(zhuǎn)到B頁面選人， 然后返回A頁面， 需要將B頁面選擇的數(shù)據(jù)傳回A頁面。
- 多個(gè)多媒體來回切換播放，暫停后二次繼續(xù)播放等問題。
代碼如下：
A頁面
重慶分公司
重慶分公司
componentDidMount() {
// 利用DeviceEventEmitter 監(jiān)聽 concactAdd事件
this.subscription = DeviceEventEmitter.addListener('concactAdd', (dic) => {// dic 為觸發(fā)事件回傳回來的數(shù)據(jù)
// 接收到 update 頁發(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頁面
// 觸發(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頁面路由失去焦點(diǎn)的時(shí)候觸發(fā)該事件
componentDidMount() {
this.props.navigation.addListener('didBlur', (payload) => {
if (this.modalView) this.modalView.close();
});
}
那么問題來了， 為何不在頁面卸載（componentWillunmount）的時(shí)候觸發(fā)該事件?
如果不了解react-native和react-navigation， 會(huì)很困惑， A頁面卸載了， 為什么還能接收到來自B頁面的數(shù)據(jù)或者事件， 原因是： react-navigation中， A頁面跳轉(zhuǎn)到B頁面， A頁面沒有卸載， 只是在它提供的路由棧中堆積，例如A跳轉(zhuǎn)到B中， A頁面不執(zhí)行componentWillunmount,當(dāng)每一個(gè)路由pop掉的時(shí)候才會(huì)執(zhí)行componentWillunmount, 卸載掉當(dāng)前頁面。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
