RN调用原生的方法

Posted 2023-03-27

参考技术A 原生暴露一个接口给RN使用。
1、用AS打开一个已存在的项目
2、在android原生创建一个类继承ReactContextBaseJavaModule，这个类里面放需要被rn调用的方法，封装成一个原生模块。

3、在Android原生这边创建一个类实现接口ReactPackage包管理器，并把第二步创建的类加到原生模块(NativeModule)列表里

4、将第三步创建的包管理器添加到ReactPackage列表里(getPackage方法里）

5、在RN中去调用原生模块 添加NativeModules从react-native

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版本保持一直)