最近公司项目需求,需要封装一些关于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(@[返回值]);}
这个方法RCTResponseSenderBlock
RN接收回调的方法。
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.静态库配置
在该设置中添加值为$(SRCROOT)/../../react-native/React,并设置为recursive。
4.设置完成后打开iOS项目文件
添加完成后需要把我们的静态库导入iOS项目中
添加完成后,我们的项目就可以使用我们导出的iOS原生组件了。