React Native 桥接原生实现 JS 调用原生方法

一、为什么需要桥接原生

为了满足在React 层无法实现的需求

• 复杂高性能的组件：复杂表格、视频播放
• 原生层开发能力：传感器编程、widget
• 平台属性：系统信息、设备信息
• 对接第三方应用：相机、相册、地图

真实的开发过程中是不可能完全使用JS就能实现所有功能，不可避免的会去使用到原生提供的能力，所以就需要去桥接原生。

二、桥接原生方法

1、编写并注册原生方法

在 MainAppLication 中有一个 ReactNativeHost 对象，其中有一个 getPackages 方法返回的就是自定义 packages。

第一步：自定义属于自己的 package

首先自定义一个类 SmallDaysPackage 继承自类 ReactPackage 并重写覆盖它的两个方法

• creatNativeModuls 主要用于桥接原生的方法
• createViewManagers 主要用于桥接原生的组件

第二步：原生模块 SmallDaysAppModule 的编写

再新建一个类模块 SmallDaysAppModule ，在这个模块中有一个 getName 方法返回这个模块的名字，在 RN 中就可通过导出的一个同名的变量访问到该模块中的方法

将自定义的 smallDaysModule 添加到 modules 中就完成了原生模块的注册

将自定义的 SmallDaysPackage 添加到 packages 中就完成了该模块的注册

上述工作完成后，剩下的就是在 SmallDaysAppModule 中编写原生方法。

第三步：在 SmallDaysAppModule 中编写方法，实现跳转相册功能和获取版本

• 跳转相册不需要返回值，是一种没有返回值的函数调用
• 获取版本需要返回版本号，是带返回值的函数调用，它通过Promise 对象的 resolve 和 reject 方法来处理成功和异常的回调。

必须加上@ReactMethod这个注解，该方法才能在 JS 层被调用，普通方法是无法在 JS 层被调用的

二、在 JS 层调用原生方法

导入 NativeModules

在 NativeModules 中取出自定义的原生模块 SmallDaysApp

SmallDaysApp 就是在原生模块 SmallDaysAppModule 中 getName 方法返回的名字

效果