RN调用原生流程总结

RN调用原生分两种：一种是调用原生组件(UI相关)，另一种是调用原生模块(功能块)

一、RN调用原生组件流程：

1、封装原生模块

先用Xcode创建原生模块，将其封装到一个或几个类文件中，并且编译自测通过，确保该模块在其他项目中集成能够正常使用

2、将原生组件暴露给React端，供其调用封装

2.1、使用Xcode工具创建一个继承自RCTViewManager的子类（一般命名为原生组件名+ViewManager后缀），并将.h文件中的导入文件修改成#import ，创建该类用于原生组件向React端暴露一些属性、方法。
2.2、在.m文件中使用RCT_EXPORT_MODULE()宏将原生组件类暴露给React端，使其能够访问到该类。并且需要实现- (UIView *)view方法返回组件UI
2.3、通过RCT_EXPORT_VIEW_PROPERTY()和RCT_EXPORT_METHOD()宏向React端分别暴露属性和方法。
2.4、若需要回调，则需导入#import ，并且实现RCTBridgeModule协议，然后就可以使用RCTResponseSenderBlock``来实现回调功能，另外还有错误回调RCTResponseErrorBlock```等可以查看文档

3、用JS代码将原生UI组件封装成一个可用的React组件

3.1、React端创建一个React组件类，如TouchableView.js，导入import { requireNativeComponent } from 'react-native'，其中requireNativeComponent中包含所有原生的封装组件，可自行console.log(requireNativeComponent)打印查看
3.2、提取原生组件并将它赋值给一个常量， let RNTouch = requireNativeComponent(‘RNTouchView’, TouchableView); requireNativeComponent中第一个参数可自行取，第二个参数为当前文件名
3.3、使用该原生组件

export default class TouchableView extends Component {
    render() {
        return(
            
        )
    }
};

3.4、这样，一个React组件就封装完成，接下来可以在需要的地方使用。使用前先导入该类， import TouchableView from './TouchableView'之后，就可以使用了

二、RN调用原生模块流程：

1、封装原生组件

先用Xcode创建原生组件，将其封装到一个或几个类文件中，并且编译自测通过，确保该组件在其他项目中集成能够正常使用

2、将原生模块暴露给React端，供其调用

2.1、在需要供RN调用的模块地方实现RCT_EXPORT_MODULE()宏，将模块暴露给React端，不同于原生组件，原生模块类不需要继承自RCTViewManager以及不需要实现- (UIView *)view方法
2.2、使用RCT_EXPORT_VIEW_PROPERTY()和RCT_EXPORT_METHOD()宏向React端暴露属性和方法(同原生组件)。
2.3、若需要回调，则仍需导入#import ，并且实现RCTBridgeModule协议，然后就可以使用```RCTResponseSenderBlock``来实现回调功能(这点也同原生组件调用)

3、React端使用原生组件

3.1、不同于原生组件，原生模块的调用可以直接在所需要的地方调用，而不需要React端进一步封装。在需要调用的地方导入import { NativeModules } from 'react-native';
3.2、将原生组件导出赋值给常量， let OCRRecognizeManager = NativeModules.OCRRecognizeManager; 其中OCRRecognizeManager名字即为刚实现RCT_EXPORT_MODULE()宏的类名，常量名可随意取
3.3、在对应的地方使用该模块中的功能，如：

OCRRecognizeManager.showOCRViewWithType(1, (callback) => {
    alert(callback)
})

其中showOCRViewWithType方法为原生模块中暴露给React端的方法，在这里也能够顺利调用到了。

RN调用原生的流程基本就是这样。

如有疑问或错误地方请在评论区提出。转载请注明出处。

参考资料：
Demo
RN中文网-原生UI组件
RN中文网-原生模块
React Native封装iOS原生UIViewController
React Native 封装原生UI组件(iOS)