RN調用原生分兩種：一種是調用原生組件(UI相關)，另一種是調用原生模塊(功能塊)
一、RN調用原生組件流程：
1、封裝原生模塊
先用Xcode創(chuàng)建原生模塊，將其封裝到一個或幾個類文件中，并且編譯自測通過，確保該模塊在其他項目中集成能夠正常使用
2、將原生組件暴露給React端，供其調用封裝
2.1、使用Xcode工具創(chuàng)建一個繼承自RCTViewManager的子類（一般命名為原生組件名+ViewManager后綴），并將.h文件中的導入文件修改成#import <React/RCTViewManager.h>，創(chuàng)建該類用于原生組件向React端暴露一些屬性、方法。
2.2、在.m文件中使用RCT_EXPORT_MODULE()宏將原生組件類暴露給React端，使其能夠訪問到該類。并且需要實現(xiàn)- (UIView *)view方法返回組件UI
2.3、通過RCT_EXPORT_VIEW_PROPERTY()和RCT_EXPORT_METHOD()宏向React端分別暴露屬性和方法。
2.4、若需要回調，則需導入#import <React/RCTBridgeModule.h>，并且實現(xiàn)RCTBridgeModule協(xié)議，然后就可以使用RCTResponseSenderBlock``來實現(xiàn)回調功能，另外還有錯誤回調RCTResponseErrorBlock```等可以查看文檔
3、用JS代碼將原生UI組件封裝成一個可用的React組件
3.1、React端創(chuàng)建一個React組件類，如TouchableView.js， 導入import { requireNativeComponent } from 'react-native'，其中requireNativeComponent中包含所有原生的封裝組件，可自行console.log(requireNativeComponent)打印查看
3.2、提取原生組件并將它賦值給一個常量， let RNTouch = requireNativeComponent(‘RNTouchView’, TouchableView); requireNativeComponent中第一個參數(shù)可自行取，第二個參數(shù)為當前文件名
3.3、使用該原生組件
export default class TouchableView extends Component {
render() {
return(
<RNTTouch {...this.props}/>
)
}
};
3.4、這樣，一個React組件就封裝完成，接下來可以在需要的地方使用。使用前先導入該類， import TouchableView from './TouchableView'之后，就可以使用了
<TouchableView
style={{width: 200, height: 200, marginTop: 50, marginLeft: 50, backgroundColor: 'yellow'}}/>
二、RN調用原生模塊流程：
1、封裝原生組件
先用Xcode創(chuàng)建原生組件，將其封裝到一個或幾個類文件中，并且編譯自測通過，確保該組件在其他項目中集成能夠正常使用
2、將原生模塊暴露給React端，供其調用
2.1、在需要供RN調用的模塊地方實現(xiàn)RCT_EXPORT_MODULE()宏，將模塊暴露給React端，不同于原生組件，原生模塊類不需要繼承自RCTViewManager以及不需要實現(xiàn)- (UIView *)view方法
2.2、使用RCT_EXPORT_VIEW_PROPERTY()和RCT_EXPORT_METHOD()宏向React端暴露屬性和方法(同原生組件)。
2.3、若需要回調，則仍需導入#import <React/RCTBridgeModule.h>，并且實現(xiàn)RCTBridgeModule協(xié)議，然后就可以使用```RCTResponseSenderBlock``來實現(xiàn)回調功能(這點也同原生組件調用)
3、React端使用原生組件
3.1、不同于原生組件，原生模塊的調用可以直接在所需要的地方調用，而不需要React端進一步封裝。在需要調用的地方導入import { NativeModules } from 'react-native';
3.2、將原生組件導出賦值給常量， let OCRRecognizeManager = NativeModules.OCRRecognizeManager; 其中OCRRecognizeManager名字即為剛實現(xiàn)RCT_EXPORT_MODULE()宏的類名，常量名可隨意取
3.3、在對應的地方使用該模塊中的功能，如：
OCRRecognizeManager.showOCRViewWithType(1, (callback) => {
alert(callback)
})
其中showOCRViewWithType方法為原生模塊中暴露給React端的方法，在這里也能夠順利調用到了。
RN調用原生的流程基本就是這樣。
如有疑問或錯誤地方請在評論區(qū)提出。轉載請注明出處。
參考資料：
Demo
RN中文網(wǎng)-原生UI組件
RN中文網(wǎng)-原生模塊
React Native封裝iOS原生UIViewController
React Native 封裝原生UI組件(iOS)
