关于React-native,iOS原生组件封装以及导出

最近公司项目需求，需要封装一些关于iOS原生的组件提供给RN调用，在本文中做一些总结。希望能帮助到大家！

---

关于组件的封装步骤

1.创建一个类，并且遵守RCTBridgeModule协议。
2.准守RCTBridgeModule必须引入RN的两个头文件#import<React/RCTBridgeModule.h>和#import <React/RCTLog.h>
3.为了实现RCTBridgeModule协议，你的类需要包含RCT_EXPORT_MODULE();宏。这个宏也可以添加一个参数用来指定在Javascript中访问这个模块的名字。
4.提供给RN调用的方法：RCT_EXPORT_METHOD(方法名称:(类型)参数名) {实现方法}
5.带有回调参数的方法实现：RCT_EXPORT_METHOD(方法名:(RCTResponseSenderBlock)callback) {callback(@[返回值]);}这个方法RCTResponseSenderBlockRN接收回调的方法。
6.该方法提供属性给RN调用：RCT_EXPORT_VIEW_PROPERTY(属性名, 类型)。
7.如果你的项目中有一些常量的属性需要开始的时候返回给RN使用可以实现该方法- (NSDictionary *)constantsToExport{return @{ @"ValueOne": @"返回的常量" };}实现该方法RN那边会把你返回的字典保存起来，以便以后调用，具体实现流程不清楚如果有大神知道可以告诉我一下，在此谢过。

以上是封装组件原生需要实现的方法。

---

RN调用原生组件步骤

//使用NativeModules可以访问我们准守RCTBridgeModule的原生类
import { NativeModules } from 'react-native';
//获取原生封装的类
var manager = NativeModules.你的原生类名;
//使用对象调用方法
manager.方法名(参数)；

以上是RN调用原生代码

---

当我们封装好的iOS组件要如何导出到RN的文件夹，不依赖于iOS项目？

1.首先我们要创建一个静态库
2.打开我们的静态库，保存到你的RN项目里要保存的文件夹里。
3.静态库配置

配置.png

在该设置中添加值为$(SRCROOT)/../../react-native/React，并设置为recursive。
4.设置完成后打开iOS项目文件

配置.png
添加完成后需要把我们的静态库导入iOS项目中
配置.png
添加完成后，我们的项目就可以使用我们导出的iOS原生组件了。

---

该文章只是对在工作中遇到的问题的一些总结分享，希望能帮助到有类似需求的小伙伴。如果有问题请指出。谢谢~~！