-
声明一个类,必须实现
<RCTBridgeModule>
协议 -
.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;
复制代码
- 调用方法,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!');
复制代码
- 回调函数,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);
});
复制代码
- 设定原生模块所处线程
- 实现
- (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(@[]);
}
复制代码
- 导出常量
- 原生模块导出一些常量,让js可以随时访问,并且运行期间不会改变
- 方法名必须是
- (NSDictionary *)constantsToExport
// .m
- (NSDictionary *)constantsToExport
{
return @{
@"firstDayOfWeek": @"Monday"
};
}
// js
alert(Test.firstDayOfWeek);
复制代码
-
发送事件
-
类需要继承
RCTEventEmitter
#import "RCTEventEmitter.h" #import "RCTBridgeModule.h" @interface MyModule : RCTEventEmitter <RCTBridgeModule> 复制代码
-
实现
supportedEvents
方法,设置发送事件的名称``` // 注册该类,对外名称为RN, RCT_EXPORT_MODULE(RN); // 设置可以发送的事件名称数组 - (NSArray<NSString *> *)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)
);
```
复制代码