ReactNative调用OC原生

这段时间研究了一下ReactNative调用原生OC的功能，在网上查了些资料，不过感觉还不是很完整，所以在这里把所有流程写下来，供大家参考
step1：要想RN调用原生，必须先从终端下载一个RN的简单模板，方法就不在这里说说，具体的看RN官网

---

step2: 在进入下载完成的文件

里面iOS文件里就是可以用xcode打开，App.js文件就是RN里面的内容

---

step3：
打开用xcode打开iOS文件打开后，创建一个继承自NSObject的文件我的就叫createCat，然后才.h文件里引入桥接文件RCTBridge这里这个桥接文件是沟通RN和OC的关键，有时引入的时候会报红，或报错，一般是没有把这个文件链接入工程，所以需要引入这文件这里面4个圈表示4个关键位置这里RCTBridge的结构如下图所示

引入完成后 编译一下，通过后就可以开始下一步编写oc内容了

---

step4

h文件内容

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

@interface CreatCat : NSObject <RCTBridgeModule>

@end

m文件内容

#import "CreatCat.h"
#import <React/RCTEventDispatcher.h>
@implementation CreatCat


RCT_EXPORT_MODULE();

//一个参数
RCT_EXPORT_METHOD(calliOSActionWithOneParams:(NSString *)name)
{
}

RCT_EXPORT_METHOD( cratCat:(NSString *)name sex:(NSString *)sex age:(int)age)
{
  NSLog(@"我创建了一只名叫%@的猫，性别%@， 今年%d岁", name, sex, age);
}

//对外提供调用方法
RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location){
  NSLog(@"Pretending to create an event %@ at %@", name, location);
}

//方法3
RCT_EXPORT_METHOD(whoName:(NSString *)name age:(int)age location:(NSString *)location){
  NSLog(@"可以的%@,年来%d,还有%@",name,age,location);
}

//回调
//RCTResponseSenderBlock
//RCTResponseSenderBlock只接受一个参数,为数组，把需要回调的参数加入到数组中，回调回去
RCT_EXPORT_METHOD(calliOSActionWithCallBack:(RCTResponseSenderBlock)callBlock){
  NSString *string=@"hello";

  NSArray *array=@[@"RN",@"and",@"iOS"];

  NSString *end=@"goodbay";

  //更多参数放到数组中进行回调
  callBlock(@[string,array,end]);
}



@end

OC内的方法就是这些，这里面还可以写其他复杂点的内容，在这里就不赘述了

---

* step5：*接下来开始编写RN的模块内容打开文件里面的App.js文件添加调用内容

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  NativeModules,
  TouchableOpacity
} from 'react-native';

//在JavaScript中调用Object-C定义的方法，需要先导入NativeModules
//此处的RNCalliOSAction就是我们在iOS上新建的类名
//如果在iOS中设置了导出了类的名字，此处需要和导出的名字一致
var cat = require('react-native').NativeModules.CreatCat;

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {

constructor(props){
        super(props);

        this.state={
            callBackData:'',
        }

    }

show(){
    // alert("aa")
    // cat.cratCat('机器猫', '男', 2);
    // cat.addEvent("血雨声","zaijia")
    cat.whoName("xieyusheng",12,"官渡")
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome} onPress={()=>this.show()}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
       <TouchableOpacity style={{height:60,marginTop:30}} onPress={()=>{ //此处的(string,array)参数列表要和回调时传的参数列表要一致。位置一样才可以获取正确的数据
                cat.calliOSActionWithCallBack((string,array,end)=>{
                    console.log(string);
                    console.log(array);
                    console.log(end);
                    let data=string+'  '+array[0]+'  '+array[1]+'  '+array[2]+'  '+end;

                    this.setState({
                        callBackData:data,
                    })

                });
            }}>
              <Text>点击调用iOS原生方法,并得到回调</Text>
              <Text>回调结果callBack：{this.state.callBackData}</Text>
          </TouchableOpacity>

      </View>
    );
  }
}

添加好调用内容后打开的Xcode中或者用终端打开这个RN项目都可以运行。开始后点击就可以看到效果了。还有什么不懂的，可以私信我。

Demo: https://github.com/zyHit-GitHub/RNBridge.git