文章目录
3. iOS原生与RN互调及传值
iOS原生项目(Objective-C)集成React Native(0.57.3版本)图文教程–(1)基本环境
iOS原生项目(Objective-C)集成React Native(0.57.3版本)图文教程–(2)集成过程
一个RNDemo(React Native 0.57.3 + ES6)实现(包含RN与原生相互跳转和通信)
3.1 RN跳转原生界面
iOS端
:
- 导入
#import <React/RCTBridgeModule.h>
. - 需要创建一个类遵守
RCTBridgeModule
协议. RCT_EXPORT_MODULE()
写调用的方法.
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(openNativeVC) {
dispatch_async(dispatch_get_main_queue(), ^{
AppDelegate *delegate = (AppDelegate *)([UIApplication sharedApplication].delegate);
UINavigationController *rootNav = delegate.navigationController;
ZYViewController *nativeVC = [[ZYViewController alloc] init];
[rootNav pushViewController:nativeVC animated:YES];
});
}
RN端
:
- 引入
NativeModules
模块. - 创建nativeModule变量.
- RN方法中调用对应的函数
var nativeModule = NativeModules.OpenNativeModule;
//跳转到原生界面
jumpToNative() {
nativeModule.openNativeVC()
}
3.2 RN跳转原生界面并传值
所传参数可以是已知的数据类型,不过最好用NSDictionary
和NSArray
来传,其实原理就是RN
那边传递个json
过来,在RN
中json
也是个对象
- 原生界面
RCT_EXPORT_METHOD(openNativeVCWithParams:(NSDictionary *)params) {
dispatch_async(dispatch_get_main_queue(), ^{
AppDelegate *delegate = (AppDelegate *)([UIApplication sharedApplication].delegate);
UINavigationController *rootNav =