RN調(diào)用原生分兩種：一種是調(diào)用原生組件(UI相關(guān))庆揩，另一種是調(diào)用原生模塊(功能塊)
一俐东、RN調(diào)用原生組件流程：
1、封裝原生模塊
先用Xcode創(chuàng)建原生模塊订晌，將其封裝到一個或幾個類文件中虏辫，并且編譯自測通過，確保該模塊在其他項目中集成能夠正常使用
2锈拨、將原生組件暴露給React端砌庄，供其調(diào)用封裝
2.1、使用Xcode工具創(chuàng)建一個繼承自RCTViewManager的子類（一般命名為原生組件名+ViewManager后綴），并將.h文件中的導(dǎo)入文件修改成#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、若需要回調(diào)陵珍，則需導(dǎo)入#import <React/RCTBridgeModule.h>寝杖，并且實現(xiàn)RCTBridgeModule協(xié)議，然后就可以使用RCTResponseSenderBlock``來實現(xiàn)回調(diào)功能互纯，另外還有錯誤回調(diào)RCTResponseErrorBlock```等可以查看文檔
3瑟幕、用JS代碼將原生UI組件封裝成一個可用的React組件
3.1、React端創(chuàng)建一個React組件類留潦，如TouchableView.js只盹， 導(dǎo)入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組件就封裝完成菩鲜，接下來可以在需要的地方使用。使用前先導(dǎo)入該類惦积， import TouchableView from './TouchableView'之后睦袖，就可以使用了
<TouchableView
style={{width: 200, height: 200, marginTop: 50, marginLeft: 50, backgroundColor: 'yellow'}}/>
二、RN調(diào)用原生模塊流程：
1荣刑、封裝原生組件
先用Xcode創(chuàng)建原生組件馅笙，將其封裝到一個或幾個類文件中，并且編譯自測通過厉亏，確保該組件在其他項目中集成能夠正常使用
2董习、將原生模塊暴露給React端，供其調(diào)用
2.1爱只、在需要供RN調(diào)用的模塊地方實現(xiàn)RCT_EXPORT_MODULE()宏皿淋，將模塊暴露給React端，不同于原生組件，原生模塊類不需要繼承自RCTViewManager以及不需要實現(xiàn)- (UIView *)view方法
2.2窝趣、使用RCT_EXPORT_VIEW_PROPERTY()和RCT_EXPORT_METHOD()宏向React端暴露屬性和方法(同原生組件)疯暑。
2.3、若需要回調(diào)哑舒，則仍需導(dǎo)入#import <React/RCTBridgeModule.h>妇拯，并且實現(xiàn)RCTBridgeModule協(xié)議，然后就可以使用```RCTResponseSenderBlock``來實現(xiàn)回調(diào)功能(這點也同原生組件調(diào)用)
3洗鸵、React端使用原生組件
3.1越锈、不同于原生組件，原生模塊的調(diào)用可以直接在所需要的地方調(diào)用膘滨，而不需要React端進一步封裝甘凭。在需要調(diào)用的地方導(dǎo)入import { NativeModules } from 'react-native';
3.2、將原生組件導(dǎo)出賦值給常量火邓， let OCRRecognizeManager = NativeModules.OCRRecognizeManager; 其中OCRRecognizeManager名字即為剛實現(xiàn)RCT_EXPORT_MODULE()宏的類名丹弱，常量名可隨意取
3.3、在對應(yīng)的地方使用該模塊中的功能铲咨，如：
OCRRecognizeManager.showOCRViewWithType(1, (callback) => {
alert(callback)
})
其中showOCRViewWithType方法為原生模塊中暴露給React端的方法蹈矮，在這里也能夠順利調(diào)用到了。
RN調(diào)用原生的流程基本就是這樣鸣驱。
如有疑問或錯誤地方請在評論區(qū)提出。轉(zhuǎn)載請注明出處蝠咆。
參考資料：
Demo
RN中文網(wǎng)-原生UI組件
RN中文網(wǎng)-原生模塊
React Native封裝iOS原生UIViewController
React Native 封裝原生UI組件(iOS)
