React Native 调用 Native 模块

最新推荐文章于 2025-04-02 17:22:40 发布

weixin_34174132

最新推荐文章于 2025-04-02 17:22:40 发布

阅读量145

点赞数

原文链接：https://juejin.im/post/5a30c4e0f265da43231af68d

版权

声明一个类，必须实现<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)
	);

	```
复制代码

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