封装iOS原生模块供ReactNative使用.

React Native支持在其基础上编写原生代码, 具有访问平台所有的能力.在日常开发中,github上很多的RN组件已经满足了大家的使用.如果有不支持你需要的原生特性的需求出现,就需要自己该特性的封装.

参考rn中文网.在React Native中，一个“原生模块”就是一个实现了“RCTBridgeModule”协议的Objective-C类，其中RCT是ReaCT的缩写.

本文按照一个调用本地通讯录的示例来说明.

大家需要新建一个静态文件库

组件名称MailList  在.h文件中

.m文件

为了实现RCTBridgeModule协议，你的类需要包含RCT_EXPORT_MODULE()宏。这个宏也可以添加一个参数用来指定在Javascript中访问这个模块的名字。如果你不指定，默认就会使用这个Objective-C类的名字。

在这里我们指定改类名

然后我们需要声明给Javascript导出的方法，声明通过RCT_EXPORT_METHOD()宏来实现：

我是把需要js传递的参数放入字典中了, 如果没有参数

RCT_EXPORT_METHOD(getMailList:(RCTResponseSenderBlock)sucessCallback :(RCTResponseSenderBlock)failCallback)

{

   //写入你调用原生通讯录的代码

   //展示原生通讯录界面 需要你获取当前的控制器 , 然后把通讯录界面展示在当前控制器上

}

然后再静态库中配置路径

路径输入 $(SRCROOT)/../../react-native/React, 选择recurvise

然后我们新建一个文件夹名称

按照官方命名规范,插件名称都是小写.

然后再该文件夹中,需要我们新建一个iOS文件夹和一个index.js文件

iOS 文件夹放入你写的插件内容

index.js 导出该插件

package.json 通过npm init 自动生成.

然后我们可以将该插件复制到RN工程 的node_modules中

然后大家通过react-native link  xxx(插件全称) 命令集成进工程中,

也可以手动导入,在Libraries中 选择Add Files to "工程名", 选择node_modules中要导入的插件mailList.xcodeproj添加进来,

然后Build Phases中添加静态.a文件进去

最终我们在RN工程中可以通过js调用