浅谈React Native 传参的几种方式(小结)

在React Native 中由于业务的需要, 我们往往要在诸多的页面间，组件之间做一些参数的传递与管理, 在这里我总结了几大经过验证，稳定好用的方式给大家

React Navigation 导航传值

推荐指数: ♥ ♥ ♥ ♥ ♥

适用范围: 相互跳转的页面间传值

兼容性: IOS/Android

原理: React Navigation 为页面的 props 上挂载了 navigation 对象, 可用来做路由跳转，在做页面跳转时可以携带参数/回调方法前往目标页面， 从而达到传参的目的

说明: 这是官方推荐，也是我们在业务开发中用得最多，最为推崇的一种传参方式, 思想与 web 在 querystring 上带参跳转类似，只是实现方式略微不同, 举例

导航传值即可正向传值，也可反向传值 例如 A->B 是正向传值， 而B->A 则是反向传值

正向传值：

A页面跳转向B页面, 在组件内通过访问 this.props.navigation.navigate('B', { 

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

在B页面 就能在组件的生命周期函数中拿到值

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

反向传值： 在反回上一个页面时, 手动调用callback， 并给其传参, 再调用 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 参数就是 { id: '123', message: 'list really?'}

DeviceEventEmitter 触发事件并传值

推荐指数: ♥ ♥ ♥ ♥

适用范围: 页面间传值/组件间传值

兼容性: IOS/Android

原理: 利用 React Native 包中提供的 DeviceEventEmitter 模块订阅事件，触发事件，并能同时传值

说明: DeviceEventEmitter 从名字就能知道他是基于事件订阅的机制来进行传值的, 当订阅某种事件后， 触发的时候会调用订阅事件的回调, 并能把值传送过去, 并且在同页面内的组间件， 不同页面间都可以传值, 但前提是页面还未被销毁(销毁后事件的订阅会取消), 例如:

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