React Native 传参的五种方式

最新推荐文章于 2023-03-02 16:25:27 发布

weixin_34361881

最新推荐文章于 2023-03-02 16:25:27 发布

阅读量1.9k

点赞数

文章标签： javascript 移动开发 json ViewUI

原文链接：https://juejin.im/post/5ce42dcc518825332b59f1f5

版权

本文总结了React Native中参数传递的五种方法：React Navigation导航传值、DeviceEventEmitter事件传递、AsyncStorage存储传参、React Context API以及全局变量Global。推荐优先使用React Navigation，其次是DeviceEventEmitter，然后是AsyncStorage，最后两种方法适用于特殊情况，避免全局污染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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<