React Native项目集成iOS原生模块

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

iOS原生端:

1.AppDelegate.h

1 // 创建一个原生的导航条
2 @property (nonatomic, strong) UINavigationController *nav;

AppDelegate.m

修改部分代码:

1   // 初始化Nav
2   _nav = [[UINavigationController alloc]initWithRootViewController:rootViewController];
3   
4   self.window.rootViewController = _nav;

2.新建一个UIViewController即可.

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

PushNative.h

 1 //
 2 //  PushNative.h
 3 //  RNAddNative
 4 //
 5 //  Created by Shaoting Zhou on 2017/2/22.
 6 //  Copyright © 2017年 Facebook. All rights reserved.
 7 //
 8 
 9 #import <Foundation/Foundation.h>
10 #import <React/RCTBridgeModule.h>
11 #import <React/RCTLog.h>
12 @interface PushNative : NSObject<RCTBridgeModule>
13 
14 @end

PushNative.h

 1 //
 2 //  PushNative.m
 3 //  RNAddNative
 4 //
 5 //  Created by Shaoting Zhou on 2017/2/22.
 6 //  Copyright © 2017年 Facebook. All rights reserved.
 7 //
 8 
 9 #import "PushNative.h"
10 #import "TestController.h"
11 #import "AppDelegate.h"
12 @implementation PushNative
13 RCT_EXPORT_MODULE();
14 // 接收传过来的 NSString
15 RCT_EXPORT_METHOD(RNOpenOneVC:(NSString *)name){
16   NSLog(@"%@", name);
17   //跳转界面
18   //主要这里必须使用主线程发送,不然有可能失效
19   dispatch_async(dispatch_get_main_queue(), ^{
20     TestController *one = [[TestController alloc]init];
21     
22     AppDelegate *app = (AppDelegate *)[[UIApplication sharedApplication] delegate];
23     
24     [app.nav pushViewController:one animated:YES];
25   });
26 }
27 @end

RN端:

引入NativeModules,InteractionManager

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

然后在点击方法里面写入

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

完整代码如下:

 1 import React, { Component } from 'react';
 2 import {
 3   AppRegistry,
 4   StyleSheet,
 5   Text,
 6   View,
 7   NativeModules,
 8   InteractionManager
 9 } from 'react-native';
10 var Push = NativeModules.PushNative;
11 
12 export default class RNAddNative extends Component {
13   render() {
14     return (
15       <View style={styles.container}>
16         <Text style={styles.welcome}>
17           我是RN界面
18         </Text>
19         <Text style={styles.instructions} onPress={()=>this.btnOnclick()}>
20           push到iOS原生界面
21         </Text>
22       </View>
23     );
24   }
25     btnOnclick =() =>{
26         InteractionManager.runAfterInteractions(()=> {
27             Push.RNOpenOneVC('测试');
28         });
29     }
30 }