美文网首页
IOS与ReactNative之间跳转

IOS与ReactNative之间跳转

作者: 天津卓朗科技 | 来源:发表于2019-06-20 18:13 被阅读0次

    原生界面跳转到RN界面

    1. 在原生应用如TianJinDL根目录下创建package.json文件,并cd到TianJinDL根目录下执行npm install 安装依赖配置。package.json文件中内容类似:
    {
      "name": "TianJinDL",
      "version": "0.0.1",
      "private": true,
      "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start"
      },
      "dependencies": {
        "react": "15.0.2",
        "react-native": "0.26.1",
        "react-navigation": "^1.0.0-beta.11"
      }
    }
    

    2.在原生应用TianJinDL的Podfile文件中添加所集成的RN需要的ReactNative依赖库,并cd到TianJinDL根目录下,执行pod install安装。Podfile文件内容如下(其中path为步骤1中安装的node_modules中的react-native文件的路径):

    pod 'React',:path =>'/Users/wangna/Desktop/TianJinDL/node_modules/react-native',:subspecs =>
    [
    'Core',
    'RCTText',
    'RCTImage',
    'RCTNetwork',
    'RCTWebSocket',
    ]
    

    3.在TianJinDL根目录下,添加要集成的RN界面的相关js文件<br />4.在原生应用TJDMeViewController控制器中,通过RCTRootView实现跳转到RN界面

    NSURL *jsCodeLocation;
     jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
     RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                            moduleName:@"TianJinDL"
                                                     initialProperties:props
                                                         launchOptions:nil];
        rootView.frame = CGRectMake(0, 64, SCREEN_WIDTH, SCREEN_HEIGHT-50-64);
        [self.view addSubview:rootView];
    

    <a name="d17d6479"></a>

    RN界面跳转到原生界面

    1.在原生应用中创建RCTModules类,继承自NSObject,使用通知的方法进行消息传送实现界面的跳转,RCTModules.m中

    //定义导出的类名
    RCT_EXPORT_MODULE(RTModule)
    //定义导出的方法
    RCT_EXPORT_METHOD(RNOpenOneVC:(NSString *)msg){
        NSLog(@"RN传入原生界面的数据为:%@",msg);
        //这里必须使用主线程发送,否则可能失效
        dispatch_async(dispatch_get_main_queue(), ^{
            [[NSNotificationCenter defaultCenter] postNotificationName:@"RNOpenOneVC" object:nil];       
        });
    }
    

    2.在集成了RN界面的控制器TJDMeViewController中添加观察者接受通知,实现界面的跳转

    [[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(doPushNotification:) name:@"RNOpenOneVC" object:nil];
     -(void)doPushNotification:(NSNotification *)notification{
        RNToiOSController *one = [[RNToiOSController alloc]init];
        [self.navigationController pushViewController:one animated:YES];
    }
    

    3.js中调用

    var RNMoodules = NativeModules.RTModule;
     <TouchableOpacity style={styles.touch1} onPress={()=>RNMoodules.RNOpenOneVC('测试')}>
     </TouchableOpacity>
    

    相关文章

      网友评论

          本文标题:IOS与ReactNative之间跳转

          本文链接:https://www.haomeiwen.com/subject/tiojqctx.html