如何在android原生中加载RN页面

Posted 2023-03-21

参考技术A 上一篇文章写了如何配置RN和android原生混合开发的相关配置
Android 模块引入ReactNative相关环境配置
下面整理一下如何在原声项目中加载一个RN的页面，主要是加载一个bundle文件

首先在RN的android项目下新建assets文件夹，project结构下右击main文件夹，新建一个名字为assets的文件夹

使用配置好的node和RN环境，在命令行输入：

在刚刚新建的assets中生成一个bundle文件，这个文件就是我们自己原生项目加载RN页面所需要的

其中addPackage()添加的为RN和Android互调所需要的相关文件。具体可参照RN和Android互调的相关文件。
在RN自动生成的android项目中，采用集成ReactActivity的方式来加载RN的页面

需要自定义AppLication来完成相关参数配置

List<ReactPackage> packages = new PackageList(this).getPackages();
点开PackageList的getPackages方法发现里面会自动配置一些所需要的packages

如果没有使用PackageList的getPackages方法，可以参照其中的package手动配置到我们的项目中去

RN系列：Android原生与RN如何交互通信

参考技术A

React Native在Android混编项目中的页面跳转和方法调用大致可以通过上面这张简图来描述下：

RN通信原理简单地讲就是，一方native（java）将其部分方法注册成一个映射表，另一方（js）再在这个映射表中查找并调用相应的方法，而Bridge担当两者间桥接的角色。
其实方法调用大致分为2种情况：

RN调用Android需要module名和方法名相同，而Android调用RN只需要方法名相同。
（1）RCTDeviceEventEmitter 事件方式
​ 优点：可任意时刻传递，Native主导控制。
（2）Callback 回调方式
​ 优点：JS调用，Native返回。
​ 缺点：CallBack为异步操作，返回时机不确定
（3）Promise
​ 优点：JS调用，Native返回。
​ 缺点：每次使用需要JS调用一次
（4）直传常量数据（原生向RN）
​ 跨域传值，只能从原生端向RN端传递。RN端可通过 NativeModules.[module名].[参数名] 的方式获取。

注意： RN层调用NativeModule层进行界面跳转时，需要设置FLAG_ACTIVITY_NEW_TASK标志。

例如下分别以 原生调用RN 和 RN调用原生 为例简单描述下：

需要添加facebook的两个图片加载库：(注意版本号尽量与你使用的RN版本内部使用的fresco版本保持一直)