const ContextWrapper = React.createContext(); <ContextWrapper.Provider value={{ name: 'Mega Galaxy', job: 'FrontEnd Engineer' }} <App /> <ContextWrapper.Provider> // 注意这里的 <App /> 是指我们 App的根组件，在包裹根组件后 我们可以在任意子页面组件 中取值
任意 <App /> 里的子页面组件中
<ContextWrapper.Counsumer> { context => <Text> { context.name } { context.job }</Text> } </ContextWrapper.Counsumer> 会渲染成 <Text> Mega Galaxy FrontEnd Engineer </Text>
缺点: 理解需要花一些功夫, 写法繁琐，且只适合特定类型的数据，要明确组件间的包裹关系
Global 传值
推荐指数: ♥ ♥ ♥
适用范围: 页面间传值
兼容性: IOS/Android
原理: 利用 Node.js 中的顶级对象 Global 来挂载属性, 利用属性传值
说明: 在跳转的页面前，可以把需要传递的参数挂载在 Global 对象上, 在跳转后即可在 Global 对象上取过相同的键取到对应的值, 例如: 在 A 页面跳转 B 页面时, Global.params = { name: 'Jalon', id: '123456'}, 在跳转之后, 即可通过 Global.params 拿到值, 除了普通的字值串,布尔值,对象，数组, 也可以传递函数, 但要注意带有 this.setState 方法的函数传递后 调用可能会报错.
缺点: 如果挂载的属性/方法过多 易造成冲突与污染, 不利于维护
个人建议: 在 react-navigation 跳转传值 与 DeviceEventEmitter 维护不方便的情况下才使用, 但尽量少用, 以免造成 Global 属性的污染与冲突
总结了5种常见的参数/数据传递的方法，以个人角度来看， 推荐顺序为 React Navigation 导航传值 > DeviceEventEmitter 触发事件并传值 > AsyncStorage Key-Value 式的存储传参, 最后 两种是在特殊场景下才会去使用，所以朋友们，在合适的场景选择合适的方式去传值，会为React Native项目的开发带来更为理想的效果，感谢您的阅读，也希望大家多多支持脚本之家。
您可能感兴趣的文章: