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

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

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

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

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

组件名称MailList  在.h文件中

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

.m文件

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

在这里我们指定改类名

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

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

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

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

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

{

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

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

}

然后再静态库中配置路径


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


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


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


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

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

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

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

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

index.js 导出该插件

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

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

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

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

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

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

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

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

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


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

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

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-07-31
  • 2022-12-23
  • 2022-01-17
  • 2021-10-16
  • 2021-09-18
猜你喜欢
  • 2021-07-21
  • 2021-12-23
  • 2021-07-13
  • 2021-05-24
  • 2021-08-01
相关资源
相似解决方案