今天学习一下怎么在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 }
演示效果+源码参考: https://github.com/pheromone/IOS-native-and-React-native-interaction 中的RNAddNative.zip