iOS原生界面与RN界面互调及传值

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与原生相互跳转和通信)

iOS原生界面与RN界面互调及传值

3.1 RN跳转原生界面

iOS端:

1. 导入#import <React/RCTBridgeModule.h>.
2. 需要创建一个类遵守RCTBridgeModule协议.
3. 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端:

1. 引入NativeModules模块.
2. 创建nativeModule变量.
3. RN方法中调用对应的函数

var nativeModule = NativeModules.OpenNativeModule;

//跳转到原生界面
jumpToNative() {
   
    nativeModule.openNativeVC()
}

3.2 RN跳转原生界面并传值

所传参数可以是已知的数据类型,不过最好用NSDictionary和NSArray来传,其实原理就是RN那边传递个json过来,在RN中json也是个对象

1. 原生界面

RCT_EXPORT_METHOD(openNativeVCWithParams:(NSDictionary *)params) {
   
    dispatch_async(dispatch_get_main_queue(), ^{
   
        AppDelegate *delegate = (AppDelegate *)([UIApplication sharedApplication].delegate);
        UINavigationController *rootNav =