RN 与 OC 交互

RN 开发过程中，很多功能还是需要由原生来实现，比如支付、分享等，这就需要在 RN 中调用 OC 的方法，或者 OC 里调用 RN 的方法。

RN.gif

一、RN 直接调用 OC 方法

1、新建一个类，导入React/RCTBridgeModule.h头文件，并遵循RCTBridgeModule协议。

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>

@interface RNHelper : NSObject <RCTBridgeModule>

@end

2、实现方法

#import "RNHelper.h"

@implementation RNHelper

@synthesize bridge = _bridge;

// 可添加参数以指定 RN 访问 OC 的模块名，默认为类名
RCT_EXPORT_MODULE();

// test 为 RN 中调用的方法名
RCT_EXPORT_METHOD(test) {

    NSLog(@"我是 OC 中的方法");
}

@end

3、调用该方法

导入NativeModules模块，并引入 OC 中的类

import { NativeModules } from 'react-native';

var helper = NativeModules.RNHelper;

比如加一个按钮，点击调用，样式就自己随意写吧

<TouchableOpacity style={styles.btn} onPress={this.test.bind(this)}>
    <Text style={{color: 'white'}}>调用 OC 方法</Text>
</TouchableOpacity>

实现这个方法

test() {
    helper.test();
}

直接调用 OC 方法.png

如此便能调用 OC 中的方法了

二、RN 向 OC 方法传值，并监听 OC 事件

比如之前应用Ping++完成过支付功能，RN 没有对应的库，只能把要支付的charge对象传递到 OC 方法中进行支付，再将支付结果返回给 RN。

因为这里的方法只能写成void类型的，也就是不能带返回值，所以需要通过监听或者回调来实现，先来看监听。

1、先实现 OC 里的方法

导入头文件

#import <React/RCTEventDispatcher.h>

实现方法，并设置事件名与传递的参数

RCT_EXPORT_METHOD(payCharge:(NSDictionary *)charge) {
    
    NSLog(@"%@", charge);
    
    NSDictionary * dict = @{@"message": @"支付完成"};
    
    [self.bridge.eventDispatcher sendAppEventWithName:@"payResult" body:dict];
}

2、RN 中导入NativeAppEventEmitter，并在componentWillMount中添加监听

import { NativeAppEventEmitter } from 'react-native';

componentWillMount() {
    this.listenPayResult = NativeAppEventEmitter.addListener('payResult', function(param) {
        if (param.message) {
            alert(param.message);
        }
    });
}

3、调用该方法

设置个按钮，点击调用

<TouchableOpacity style={styles.btn2} onPress={this.payCharge.bind(this)}>
    <Text style={{color: 'white'}}>监听 OC 事件</Text>
</TouchableOpacity>

实现该方法

payCharge() {
    var charge = {
        'price': 100
    }
    helper.payCharge(charge);
}

4、不可或缺的一步 —— 移除监听

离开当前页面时要将监听移除，否则会有内存问题

componentWillUnmount() {
    this.listenPayResult.remove();
}

传参并监听.png

三、回调

RN 与 OC 交互也可通过回调方式来实现，比如某些app会有一个说明页，显示当前的版本信息等，RN 中是无法获取，同样要调用 OC 方法，这里可以将得到的版本号回调出去。

1、先实现 OC 中方法

RCT_EXPORT_METHOD(getVersionInfo:(RCTResponseSenderBlock)callback) {
    
    NSDictionary * infoDict = [[NSBundle mainBundle] infoDictionary];
    
    NSString * appCurVersion = [infoDict objectForKey:@"CFBundleShortVersionString"];

    callback(@[[NSNull null], appCurVersion]);
}

2、RN 调用该方法，并获取回调信息

设置个按钮，点击调用

<TouchableOpacity style={styles.btn3} onPress={this.getVersionInfo.bind(this)}>
    <Text style={{color: 'white'}}>获取 OC 回调</Text>
</TouchableOpacity>

实现该方法

getVersionInfo() {
    helper.getVersionInfo((error, callback) => {
        if (callback) {
            alert(callback);
        }
    });
}

通过回调调用 OC 方法.png

一般情况下，通过回调、监听，大部分 RN 和 OC 的交互需求都能满足。

如果看完这篇文章对你有所帮助的话，动动大家发财的小手，点个喜欢 ❤️ 再走吧，想认证一个简书推荐作者，需要 2000 个 ❤️ ，还差 1900 多个 😂