iOS与ReactNative 混合开发

在前端应用的实际场景之中，原生与React Native的交互的必要的，很多实时性不强的界面需要放到原生应用中，比如常用的登录注册界面,在本篇文章之中将带你走向React Native与原生代码之间通讯的，并在React Native与原生界面之间来回切换。
** 原生与RN的通讯: **
1、 RN给原生发送消息：
在Xcode 中新建一个工程，在工程中创建相应的类（遵循RCTBridgeModule协议），用来接受RN端发送的消息

import

import "RCTBridgeModule.h" //用来实现 RCTBridgeModule 协议

import "RCTBridge.h" //用来实现向RN发送事件

import "RCTEventDispatcher.h" //用来实现向RN发送事件

@interface ExampleRNBridge : NSObject
@property (nonatomic, strong) NSString *contactName;
@property (nonatomic, strong) NSArray *contactPhoneNumber;
@end

.m 文件中实现

 @synthesize bridge = _bridge;
 //这个宏可以添加一个参数用来指定JS中访问这个模块的名字，通常不指定名字，默认使用 object-c 类的名字
 RCT_EXPORT_MODULE();
 //这个宏声明需要提供给RN组件调用的方法
 RCT_EXPORT_METHOD(sendMessage:(NSString *)msg{
 //接受RN端发送的消息，在原生中实现相应的处理
 };
 
 

RN中发送消息到原生：

 在使用的时间记得引入ExampleRNBridge
 ExampleRNBridge.sendMessage('{"msgType":"pick\Contact"}');
 
 

2、 原生给RN发送消息
有时我们需要通过原生给RN发送消息，在ExampleRNBridge类中实现发送发送消息的代码

 [self.bridge.eventDispatcher sendAppEventWithName:@"NativeModuleMsg" body:@"你好"];
 
 

在RN中接受消息的代码为：

 // RN中接收来自原生的消息 (记得引入NativeAppEventEmitter)
 componentWillMount(){
 var subscription1 = NativeAppEventEmitter.addListener(
 'NativeModuleMsg', (reminder) => {this.handleNativeInterfaceMsg(reminder);
 }
 );
 }
 handleNativeInterfaceMsg(reminder){
 debugger;
 console.log(reminder)
 }
 
 

3、iOS混合开发中传递的参数类型
对于原生与RN中的参数的传递，我认为最好的方式就是只传一个字符串，将这个字符串定位json格式的字符串，这个字符串参数中可以有任意类型、任意多个数据。传递前，将需要传递的参数组成一个JSON对象，然后通过JSON转换字符串的方法快速转换为我一个字符串，字符串传递后在对端执行相应的操作，可以快速的从字符串恢复为JSON对象，从而取得各种参数；RN提供给OC的RCTConvert有一系列的辅助函数，用来接受一个JSON值并转换为原生的OC类型或类。注意：NSDate 类型的数据不支持直接被传递，开发者需要转换为字符串传递。