React Native与原生iOS项目通信

• 原生iOS项目中

  • 创建一个继承NSObject的类
  • 类中引入头文件 RCTBridgeModule.h
  • 签订协议 <RCTBridgeModule>
  • .m文件 引入头文件 RCTEventDispatcher.h
  • .m文件 方法导出 RCT_EXPORT_MODULE()
  • js调用原生方法 RCT_EXPORT_METHOD()
  • 原生方法调用js

• .h文件

#import <Foundation/Foundation.h>
#import "RCTBridgeModule.h"//引入头文件
@interface RNModule : NSObject<RCTBridgeModule>//签订协议
@end

• .m文件

#import "RNModule.h"
#import "RCTEventDispatcher.h"
@implementation RNModule
//必写
RCT_EXPORT_MODULE()

• js调用原生方法

//js调用原生方法
RCT_EXPORT_METHOD(RNTest:(NSString *)name age:(int)age){
    NSLog(@"RN调用了原生方法 name：%@ ，age%d",name,age);
}
//桥接到Javascript的方法返回值必须是void。React native的桥接操作是异步的。所以要返回给Javascript，必须通过回调函数或者出触发事件
RCT_EXPORT_METHOD(jsCallback:(NSString *)jsString callBack:(RCTResponseSenderBlock)callback){
    NSLog(@"调用了jsCallback函数 %@",jsString);
     NSArray *events = [[NSArray alloc] initWithObjects:@"哈哈哈哈",@"回调函数", nil];
    NSString *str  = @"hhhhhhah 哈哈这是返回的字符串";
    callback(@[[NSNull null],str]);  
}

• oc调用js

//oc调用js 间接调用 js->oc->js
@synthesize bridge = _bridge;

RCT_EXPORT_METHOD(OCTest){
    [self ocCallJs];
}

- (void)ocCallJs{
    
    NSDictionary *dict = @{@"name":@"lish-这是oc调用rn的方法",@"age":@25};
    [self.bridge.eventDispatcher sendAppEventWithName:@"ocCallJs" body:dict];

}
@end

• js文件

- import {
    NativeModules,
} from 'react-native';
//js 调用原生函数 函数名 RNTest
var RN = NativeModules.RNModule;
//RNModule 这个是原生对应得文件名字

//OC调用js
var Js = NativeAppEventEmitter.addListener(
    'ocCallJs',
    (para)=> Alert.alert('被oc点击','字典数据:\n name:'+para.name+'\n age:'+para.age)

);

export default class test extends Component {

  // 构造
    constructor(props) {
      super(props);
      // 初始状态
      this.state = {

      };
    }

    componentWillUnmount() {
        Js.remove();
    }

  render() {
    return (
      <View style={styles.container}>
      <TouchableOpacity
      onPress = {()=>{
          RN.OCTest()

      }}>
        <Text style={styles.welcome}>
      OC调用RN方法
        </Text>
      </TouchableOpacity>
      <TouchableOpacity
      onPress = {()=>{
          RN.RNTest('Lishuang',25);
      }}>
        <Text style={styles.welcome}>
         RN调用OC方法
        </Text>
         </TouchableOpacity>
         <TouchableOpacity
       onPress = {()=>{
          RN.jsCallback('Lishuang',(error,callBack)=>{
            if(error){
              Alert.alert({error})
            }else{
                  //Alert.alert('J2O带返回值', '数组的三个值：\n[0]:'+callBack[0]+'\n[1]:'+callBack[1])
                   Alert.alert(callBack)
              }
          });
      }}>
        <Text style={styles.welcome}>
         RN调用OC方法-带回调函数
        </Text>
          </TouchableOpacity>
      </View>
    );
  }
}

demo下载