React Native 调用 Native 模块

1. 声明一个类，必须实现 协议

2. .m文件中实现宏定义RCT_EXPORT_MODULE（），当它加载的时候，会自动注册

// js_name 就是react native 获取类时所对应的名称，
// 即 NativeModules.js_name
// 传空的话，名称就是类名字
// #define RCT_EXPORT_MODULE(js_name)
 // .m 文件
 RCT_EXPORT_MODULE(Test);
 
 // js 文件
 import {NativeModules} from 'react-native';
 var Test = NativeModules.Test;
复制代码

3. 调用方法，js调用OC的方法

• 需要另外一个宏RCT_EXPORT_METHOD(method)，js 中 使用.来调用
• 方法返回值类型必须为void
• 传参类型
  • string: NSString
  • number: 基本类型
  • boolean
  • array
  • object: NSDictionary, key为string，value是列表中的类型
  • function: RCTResponseSenderBlock

// .m 文件
RCT_EXPORT_METHOD(print:(NSString *)text)
{
    NSLog(@"---------%@", text);
}

// js文件
Test.print('Hello World!'); 
复制代码

4. 回调函数，js中的参数经过OC方法的处理，结果再返回给js

• RCTResponseSenderBlock 唯一参数，数组
• 第一个元素一般为错误对象，第二个元素才是返回结果

// .m
RCT_EXPORT_METHOD(add:(NSInteger)numA andNumB:(NSInteger)numB result:(RCTResponseSenderBlock)callback) {
     callback(@[[NSNull null], @(numA + numB)]);
}

// js
Test.add(1, 2, (error, result)=>{
     alert('1 + 2 =' + result);
});
复制代码

5. 设定原生模块所处线程

• 实现- (dispatch_queue_t) methodQueue，即原生模块中的所有方法都会在methodQueue中执行
• 也可以RCT_EXPORT_METHOD()方法内部开辟分线程，让一些费时的操作在分线程中执行

RCT_EXPORT_METHOD(doSomethingExpensive:(NSString *)parma callback:(RCTResponseSenderBlock)callback) {
    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
       
          // 执行长时间的操作
          
          // callback视情况 1， 2 位置都可以
          // 1. callback(@[]);
       });
     
       // 2. callback(@[]);
}
复制代码

6. 导出常量

• 原生模块导出一些常量，让js可以随时访问，并且运行期间不会改变
• 方法名必须是- (NSDictionary *)constantsToExport

// .m
- (NSDictionary *)constantsToExport
{
    return @{
             @"firstDayOfWeek": @"Monday"
             };
}

// js
alert(Test.firstDayOfWeek);
复制代码

7. 发送事件

8. 类需要继承RCTEventEmitter

   #import "RCTEventEmitter.h"
   #import "RCTBridgeModule.h"
    
   @interface MyModule : RCTEventEmitter  
   
   复制代码

9. 实现supportedEvents方法，设置发送事件的名称

   ```
   // 注册该类，对外名称为RN，
   RCT_EXPORT_MODULE(RN);
   // 设置可以发送的事件名称数组
   - (NSArray *)supportedEvents
   {
       return @[@"textChange"];
   }
   
   - (void)changeText:(NSString *)text
   {
   
       self.text = text;
       // 发送事件
       [self sendEventWithName:@"textChange" body:@{
                                                   @"text": self.text
                                                   }];        
   
   }
   ```
   复制代码

3.  js文件中

	```
	import { NativeModules, NativeEventEmitter } from 'react-native'
	// 获取组件RN
	var RN = NativeModules.RN;

	const RNEvent = new NativeEventEmitter(RN);

	var subscription = RNEvent.addListener(
	    'textChange',
	    (result) => alert(result.text)
	);

	```
复制代码

参考链接: 官网 中文官网 发送事件