React Native 跳转原生界面,原生界面跳转RN界面
2019-07-01 本文已影响0人
幽玄727
1.RN跳转原生界面
在iOS中暴露出一个sendMessage的方法给RN,并可以传值,在iOS中创建一个ViewController的控制器,跳转界面,需要在主线程中
注意:在iOS中AppDelegate中重新定义一个UINavigationController导航,作为整个app跳转界面使用,
![](https://img.haomeiwen.com/i6894675/01c55986747fe66c.png)
![](https://img.haomeiwen.com/i6894675/dc3dd33d104553e0.png)
![](https://img.haomeiwen.com/i6894675/90957e5f23d8b60b.png)
在RN中 在点击事件中,调用sendMessage并传,你需要传的值过去
![](https://img.haomeiwen.com/i6894675/864cdde5a32a425d.png)
![](https://img.haomeiwen.com/i6894675/8e1efa09fcf91d48.png)
2.原生跳转到RN界面
在原生中的点击事件中调用RN
注意:由于原生跳转RN只能到默认的RN的入口文件index中,所有需要在Properties中设置componentName来做具体的区分,其中Appdelegate中也需要改动
![](https://img.haomeiwen.com/i6894675/e47bf01904edffdf.png)
AppDelegate
![](https://img.haomeiwen.com/i6894675/35a8ee90df6bea9c.png)
接下来就是重点,RN中的代码
获取componentName来判断进入不同的界面
其中NewApp作为一个新的界面(RN中界面的创建类名必须大写,否则会有可能找不到该类)
![](https://img.haomeiwen.com/i6894675/f0d1958f860168a2.png)