RN調用原生分兩種:一種是調用原生組件(UI相關),另一種是調用原生模塊(功能塊)
一、RN調用原生組件流程:
1、封裝原生模塊
先用Xcode創建原生模塊,將其封裝到一個或幾個類文件中,并且編譯自測通過,確保該模塊在其他項目中集成能夠正常使用
2、將原生組件暴露給React端,供其調用封裝
2.1、使用Xcode工具創建一個繼承自RCTViewManager
的子類(一般命名為原生組件名+ViewManager后綴),并將.h文件中的導入文件修改成#import <React/RCTViewManager.h>
,創建該類用于原生組件向React端暴露一些屬性、方法。
2.2、在.m文件中使用RCT_EXPORT_MODULE()
宏將原生組件類暴露給React端,使其能夠訪問到該類。并且需要實現- (UIView *)view
方法返回組件UI
2.3、通過RCT_EXPORT_VIEW_PROPERTY()
和RCT_EXPORT_METHOD()
宏向React端分別暴露屬性和方法。
2.4、若需要回調,則需導入#import <React/RCTBridgeModule.h>
,并且實現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(
<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創建原生組件,將其封裝到一個或幾個類文件中,并且編譯自測通過,確保該組件在其他項目中集成能夠正常使用
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 <React/RCTBridgeModule.h>
,并且實現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)