背景:在将React Native框架集成到现有的项目中后,需要处理的主要问题之一是如何在React Native页面、h5页面和原生页面之间进行跳转以及参数传递。
问题:在React Native(RN)和原生页面之间,需要实现页面跳转和参数传递,包括基本数据类型和回调函数。
解决策略:
- 把RN页面视为原生页面:每次打开一个RN页面,都启动一个原生页面来加载RN View。这个原生页面实际上是一个空容器,承载RN页面。这样原生端的路由库就可以管理和控制这个原生容器类。
- 使用原生路由统一管理跳转:利用原生端路由管理库(例如,iOS端的WYMediator)来统一管理RN与原生端页面、RN与h5页面之间的跳转。在两端互相跳转时,原生路由库能够管理和控制这个空容器类,初始化过程中,参数被传递并完成跳转。
效果:这种策略成功实现了RN和原生页面间的灵活跳转和参数传递,满足了复杂的页面跳转和参数传递需求。
混合页面路由管理
当我们把React Native框架集成到现有项目,就不可避免地带来了一个新问题,React Native和原生页面之间如何相互跳转,如何传递参数?路由跳转中,不仅仅是直接打开一个新页面,也可能是返回前n个页面并带上回传参数,也可能是跳转新页面的同时关闭当前n个旧页面。传参也不仅仅是基本的数据类型,也可能会传一个回调函数。
我们从原生跟h5的跳转说起,在我们app中的h5页面首先是个原生页面,因为每个h5页面有对应的原生容器来承载,这个原生容器有个webview组件,它是真正装载h5页面。这样把h5页面当成原生页面对待,就能用一个路由同时管理原生和h5页面的跳转。我们用同样的思路来处理RN页面。把RN页面也当成原生页面。
每打开一个React Native页面就启动一个原生页面加载React Native View,实际上这个原生页面相当于一个空容器,唯一作用是承载React Native页面。
原生端的路由库能管理和控制这个原生容器类。在两端互相跳转时,根据同一协议,类似 wynative://appBase/rncontainer,在初始化的过程中将参数传递过去并完成跳转。
我们桥接了原生端的路由管理库,iOS端为WYMediator,由它来统一管理React Native 与 原生端页面、React Native与h5页面之间的跳转,传参通过桥接或插件再转发对RN或h5,完成混合页面下的跳转和传参。