React Native项目集成iOS原生模块

今天学习一下怎么在React Native项目中集成iOS原生模块,道理和在iOS原生项目中集成React Native模块类似.他们的界面跳转靠的都是iOS原生的UINavigationController.

iOS原生端:

1.AppDelegate.h

 // 创建一个原生的导航条

 @property (nonatomic, strong) UINavigationController *nav;

AppDelegate.m

修改部分代码:

   // 初始化Nav

   _nav = [[UINavigationController alloc]initWithRootViewController:rootViewController];

   self.window.rootViewController = _nav;

2.新建一个UIViewController即可.

3.新建类PushNative,继承NSObject,遵循.实现RCTBridgeModule协议,引入相关类.

PushNative.h

 //

 //  PushNative.h

 //  RNAddNative

 //

 //  Created by Shaoting Zhou on 2017/2/22.

 //  Copyright © 2017年 Facebook. All rights reserved.

 //

 #import <Foundation/Foundation.h>

 #import <React/RCTBridgeModule.h>

 #import <React/RCTLog.h>

 @interface PushNative : NSObject<RCTBridgeModule>

 @end

PushNative.h

 //

 //  PushNative.m

 //  RNAddNative

 //

 //  Created by Shaoting Zhou on 2017/2/22.

 //  Copyright © 2017年 Facebook. All rights reserved.

 //

 #import "PushNative.h"

 #import "TestController.h"

 #import "AppDelegate.h"

 @implementation PushNative

 RCT_EXPORT_MODULE();

 // 接收传过来的 NSString

 RCT_EXPORT_METHOD(RNOpenOneVC:(NSString *)name){

   NSLog(@"%@", name);

   //跳转界面

   //主要这里必须使用主线程发送,不然有可能失效

   dispatch_async(dispatch_get_main_queue(), ^{

     TestController *one = [[TestController alloc]init];

     AppDelegate *app = (AppDelegate *)[[UIApplication sharedApplication] delegate];

     [app.nav pushViewController:one animated:YES];

   });

 }

 @end

RN端:

引入NativeModules,InteractionManager

var Push = NativeModules.PushNative;    //这个PushNative就是原生中的PushNative类

然后在点击方法里面写入

Push.RNOpenOneVC('测试');    //这个RNOpenOneVC()就是原生中的PushNative类中的方法

完整代码如下:

 import React, { Component } from 'react';

 import {

   AppRegistry,

   StyleSheet,

   Text,

   View,

   NativeModules,

   InteractionManager

 } from 'react-native';

 var Push = NativeModules.PushNative;

 export default class RNAddNative extends Component {

   render() {

     return (

       <View style={styles.container}>

         <Text style={styles.welcome}>

           我是RN界面

         </Text>

         <Text style={styles.instructions} onPress={()=>this.btnOnclick()}>

           push到iOS原生界面

         </Text>

       </View>

     );

   }

     btnOnclick =() =>{

         InteractionManager.runAfterInteractions(()=> {

             Push.RNOpenOneVC('测试');

         });

     }

 }

演示效果+源码参考:  https://github.com/pheromone/IOS-native-and-React-native-interaction  中的RNAddNative.zip