在React Native 中由于業(yè)務的需要, 我們往往要在諸多的頁面間，組件之間做一些參數(shù)的傳遞與管理, 在這里我總結(jié)了幾大經(jīng)過驗證，穩(wěn)定好用的方式給大家

React Navigation 導航傳值

推薦指數(shù): ♥ ♥ ♥ ♥ ♥

適用范圍: 相互跳轉(zhuǎn)的頁面間傳值

兼容性: IOS/Android

原理: React Navigation 為頁面的 props 上掛載了 navigation 對象, 可用來做路由跳轉(zhuǎn)，在做頁面跳轉(zhuǎn)時可以攜帶參數(shù)/回調(diào)方法前往目標頁面， 從而達到傳參的目的

說明: 這是官方推薦，也是我們在業(yè)務開發(fā)中用得最多，最為推崇的一種傳參方式, 思想與 web 在 querystring 上帶參跳轉(zhuǎn)類似，只是實現(xiàn)方式略微不同, 舉例

導航傳值即可正向傳值，也可反向傳值 例如 A->B 是正向傳值， 而B->A 則是反向傳值

正向傳值：

A頁面跳轉(zhuǎn)向B頁面, 在組件內(nèi)通過訪問 this.props.navigation.navigate('B', { 

 type: 'list',    callback：data => { console.log('data in callback: ', data); } });

在B頁面 就能在組件的生命周期函數(shù)中拿到值

 componentWillMount() { const { state: { params: { type, callback }, goBack }} = this.props.navigation; console.log('type: ', type); // type 'list' }

反向傳值： 在反回上一個頁面時, 手動調(diào)用callback， 并給其傳參, 再調(diào)用 goBack 方法， 即可達到目的

還是上面的例子:

當從B返回A的時候

 goBackToPageA: () => { const { state: { params: { type, callback }, goBack }} = this.props.navigation; callback({ id: '123', message: type + ' really?'}); goBack(); } goBackToPageA();

 回到A頁面后

'data in callback: ', { id: '123', message: 'list really?'});

 也即callBack 中的 data 參數(shù)就是 { id: '123', message: 'list really?'}

DeviceEventEmitter 觸發(fā)事件并傳值

推薦指數(shù): ♥ ♥ ♥ ♥

適用范圍: 頁面間傳值/組件間傳值

兼容性: IOS/Android

原理: 利用 React Native 包中提供的 DeviceEventEmitter 模塊訂閱事件，觸發(fā)事件，并能同時傳值

說明: DeviceEventEmitter 從名字就能知道他是基于事件訂閱的機制來進行傳值的, 當訂閱某種事件后， 觸發(fā)的時候會調(diào)用訂閱事件的回調(diào), 并能把值傳送過去, 并且在同頁面內(nèi)的組間件， 不同頁面間都可以傳值, 但前提是頁面還未被銷毀(銷毀后事件的訂閱會取消), 例如:

 DeviceEventEmitter.addListener('warning_event', (data) => { console.log('data: ', data);}) DeviceEventEmitter.emit('warning_event', { name: 'Mega Galaxy'}); // data: { name: 'Mega Galaxy' }