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)