ReactNative和原生交互之iOS

一、RN调用原生方法

1、定义模型

对于React Native 来讲，iOS端一个实现了RCTBridgeModule 协议的NSObject及其子类就可以被JS调用；

例如：

#import <React/RCTBridgeModule.h>

@interface ZHJSManager : NSObject <RCTBridgeModule>
@end

#import "ZHJSManager.h"
@implementation ZHJSManager

// 默认导出名为 ZHJSManager 的module暴露给JS
RCT_EXPORT_MODULE();

// 也可以传值自定义moduleName  比如 RCT_EXPORT_MODULE(MyCustomJSManager);

@end

2、暴露方法

模型定义好之后就可以写方法，为了让RN发现原生方法需要在.m中使用另外一个宏定义RCT_EXPORT_METHOD()来导出（包裹）你的方法:

@implementation ZHJSManager

 RCT_EXPORT_MODULE();RCT_EXPORT_METHOD(methodNameWithFirst:(NSString *)paramStr second:(NSString *)second){
  //OC代码随便写
}

// 你还可以使用RN向原生端传递整数RCT_EXPORT_METHOD(getIntFromReactNative:(NSInteger)count) {  NSString *msg = [NSString stringWithFormat:@"我收到来自RN的整数：%zd", count];  [self showAlert:msg];}// 你甚至还可以使用RN向原生传递NSDictionary和NSArray等复杂数据RCT_EXPORT_METHOD(getDictionaryFromRN:(NSDictionary *)dict) {  NSLog(@"RN传递过来的字典：%@", dict);  // 使用字典参数做你想做的，原生iOS攻城狮}RCT_EXPORT_METHOD(getArrayFromRN:(NSArray *)array) {  NSLog(@"RN传递过来的数组：%@", array); // 使用数组参数做你想做的，原生iOS攻城狮}//还可以使用RN提供的block
RCT_EXPORT_METHOD(giveMyRNSomeStringWithBlock:(RCTResponseSenderBlock)callbackBlock) {  if (callbackBlock) {    callbackBlock(@[@"包裹在数组中的字符串"]);  }}
/// 使用block回传字典或者数组（包裹成二维数组了）到RN端RCT_EXPORT_METHOD(giveMyRNSomeDicDataWithBlock:(RCTResponseSenderBlock)callbackBlock) {  if (callbackBlock) {    NSDictionary *dict = @{@"key1": @"strValue",                           @"key2" : @(20),                           @"key3": @(YES)};
    callbackBlock(@[dict]);  }}
//同步方法的宏,两个参数第一个是返回值的类型，第二个是方法名RCT_EXPORT_SYNCHRONOUS_TYPED_METHOD(NSString*, canReturnSomething){    return @"SSSSS";
}// 使用Promise回传数据到RN端
RCT_REMAP_METHOD(findEvents,
                 findEventsWithResolver:(RCTPromiseResolveBlock)resolve
                 rejecter:(RCTPromiseRejectBlock)reject)
{
  NSArray *events = ...
  if (events) {
    resolve(events);
  } else {
    NSError *error = ...
    reject(@"no_events", @"There were no events", error);
  }
}
//或者//RCT_EXPORT_METHOD(usePromisePassToRN:(NSString *)key resolve:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject) {//  if (![key isEqualToString:@""]) {//    resolve(@(YES));//  } else {//    reject(@"warning", @"key 不能为空!", nil);//  }//}@end

3、相关JS代码实现如下

//Promise方法调用原生
async function updateEvents() {
  try {
    const events = await ZHJSManager.findEvents();    this.setState({ events });
  } catch (e) {
    console.error(e);
  }
}
function methodNameWithFirst(param1,param2){
//其他调用类似
ZHJSManager.methodNameWithFirst(param1,param2);}

4、多线程相关操作

目前React Native 在一个独立的串行 GCD 队列中调用原生模块的方法，如果要指定队列，原生在自己的模块中通过实现方法：

- (dispatch_queue_t)methodQueue，可以指定自己想在哪个队列中被执行。

例如：

//返回主队列
- (dispatch_queue_t)methodQueue
{
  return dispatch_get_main_queue();
}

//或者其他操作，你可以返回一个其他的queue
- (dispatch_queue_t)methodQueue
{
  return dispatch_queue_create("com.facebook.React.AsyncLocalStorageQueue", DISPATCH_QUEUE_SERIAL);
}

但要注意这个方法在你的module中实现之后所有的方法都是在你指定的队列中执行。

        如果一个操作需要花费很长时间，原生模块不应该阻塞住，而是应当声明一个用于执行操作的独立队列。举个例子，RCTAsyncLocalStorage模块创建了自己的一个 queue，这样它在做一些较慢的磁盘操作的时候就不会阻塞住 React 本身的消息队列。

如果你的方法中“只有一个”是耗时较长的（或者是由于某种原因必须在不同的队列中运行的），你可以在函数体内用dispatch_async方法来在另一个队列执行，而不影响其他方法：

RCT_EXPORT_METHOD(doSomethingExpensive:(NSString *)param callback:(RCTResponseSenderBlock)callback)
{
  dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
    // 在这里执行长时间的操作
    ...
    // 你可以在任何线程/队列中执行回调函数
    callback(@[...]);
  });
}

注意: 在模块之间共享分发队列

methodQueue方法会在模块被初始化的时候被执行一次，然后会被 React Native 的桥接机制保存下来，所以你不需要自己保存队列的引用，除非你希望在模块的其它地方使用它。但是，如果你希望在若干个模块中共享同一个队列，则需要自己保存并返回相同的队列实例；仅仅是返回相同名字的队列是不行的。

5、依赖注入

RN的bridge 会自动注册实现了RCTBridgeModule协议的原生模块，但是你可能也希望能够自己去初始化自定义的模块实例（这样可以注入依赖）。

要实现这个功能，你需要实现RCTBridgeDelegate协议，初始化RCTBridge，并且在初始化方法里指定代理。然后用初始化好的RCTBridge实例初始化一个RCTRootView。

id<RCTBridgeDelegate> moduleInitialiser = [[classThatImplementsRCTBridgeDelegate alloc] init];

RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:moduleInitialiser launchOptions:nil];

RCTRootView *rootView = [[RCTRootView alloc]
                        initWithBridge:bridge
                            moduleName:kModuleName
                     initialProperties:nil];

6、导出常量

原生模块可以导出一些常量，这些常量在 JavaScript 端随时都可以访问。用这种方法来传递一些静态数据，可以避免通过 bridge 进行一次来回交互。

//实现此方法
- (NSDictionary *)constantsToExport
{
  return @{ @"firstDayOfTheWeek": @"Monday" };
}

JavaScript 端可以随时同步地访问这个数据：

console.log(CalendarManager.firstDayOfTheWeek);

但是注意这个常量仅仅在初始化的时候导出了一次，所以即使你在运行期间改变constantToExport返回的值，也不会影响到 JavaScript 环境下所得到的结果。

如果想让constantToExport生效还必须实现requiresMainQueueSetup并返回true

/*
If you override - constantsToExport then you should also implement + requiresMainQueueSetup to let React Native know if your module needs to be initialized on the main thread. Otherwise you will see a warning that in the future your module may be initialized on a background thread unless you explicitly opt out with + requiresMainQueueSetup:
*/
+ (BOOL)requiresMainQueueSetup
{
  return YES;  // only do this if your module initialization relies on calling UIKit!
}

二、原生调用JS方法（发送事件）

即使没有被 JavaScript 调用，原生模块也可以给 JavaScript 发送事件通知。最好的方法是继承RCTEventEmitter，实现suppportEvents方法并调用self sendEventWithName:。

/// 接收通知的方法，接收到通知后发送事件到RN端。RN端接收到事件后可以进行相应的逻辑处理或界面跳转
- (void)sendCustomEvent:(NSNotification *)notification {  
[self sendEventWithName:kCustomEventName body:@"这是发给RN的字符串"];
}
/// 重写方法，定义支持的事件（方法名）集合
- (NSArray<NSString *> *)supportedEvents {
  return @[kCustomEventName,kHaveImportListNotification,kHaveSelectedExpressImage,kHaveSelectedRbrsImages];
}

三、调用原生UI组件

你甚至可以自己在iOS编写一个组件然后提供给RN来作为render中的一部分来渲染页面

• 首先创建一个RCTViewManager的子类。

• 添加RCT_EXPORT_MODULE()宏标记。

• 实现-(UIView *)view方法。

  // ZHMapManager.m
  // 命名规则前缀自定义，避免和RNT 或者UI这种框架自己的命名规则冲突 #import <MapKit/MapKit.h>

  #import <React/RCTViewManager.h> @interface ZHMapManager : RCTViewManager @end

  @implementation ZHMapManager

  RCT_EXPORT_MODULE(ZHCustomMap)

  • (UIView *)view { //这里不能设置frame和backgroundcolor之类的属性，会被ReactNative所覆盖，因为他要保证整个页面的一致性， //你可以直接在jsx中设置style return [[MKMapView alloc] init]; } @end

你在原生种完成了上面的代码，为了能让js可以直接使用，还需要作如下操作，添加MapView.js文件，然后使用RN提供的HOC方法requireNativeComponent

// MapView.js
import { requireNativeComponent } from 'react-native';/*
requireNativeComponent 自动把'ZHCustomMap'解析为'ZHCustomMapManager'
第二个参数MapView可选，但建议加上
这使得 React Native 的底层框架可以检查原生属性和包装类的属性是否一致，来减少出现问题的可能。
*/export default requireNativeComponent('ZHCustomMap',MapView);//

然后你就可以在其他组件中使用这个MapView组件了。so easy,so nice

// MyApp.jsimport MapView from './MapView.js';
...render() {//需要加上style，否则看不到哦  return <MapView style={{ flex: 1 }} />;}

这里你应该会有疑问，每个组件都有自己的属性，原生组件怎么设置某些属性？直接在我们自定义的ZHMapManager.m文件中添加导出属性

// ZHMapManager.m
RCT_EXPORT_VIEW_PROPERTY(zoomEnabled, BOOL)

然后我们就可以在js代码中愉快的使用我们原生属性了

// MyApp.js
<MapView zoomEnabled={false} style={{ flex: 1 }} />

当然，你应该加一些文档以方便你组件的使用者，或者如果你使用的是ts，记得写个interface来约束下。

更复杂的属性如下

// ZHMapManager.m
RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
  [view setRegion:(json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region) animated:YES];
}