Cordova js和原生交互demo

添加库：
进入RN项目根目录：
输入命令：npm install “第三方库” –save 如：npm install react-native-swiper –save
删除库：
如果没有–save只是删除库，不会删除依赖
输入命令 npm uninstall “第三方库” –save [npm uninstall react-native-toast –save]

RN项目与原生交互：
首先建立Manager管理类并引入如下文件

#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>
#import <React/RCTBridge.h>
#import <React/RCTEventDispatcher>
#import <React/RCTEventEmitter >
解释下这几个头文件：
RCTEventDispatcher（事件调度器）
RCTBridge （桥接）
RCTBridgeModule (桥接模块)需要循序协议如：

@interface XXXXManger : NSObject
RCTEventEmitter (RCT的事件源）
Log就不用说了

XXXXManger.m中添加RCT_EXPORT_MODULE()宏,来 实现RCTBridgeModule协议。这个宏也可以添加一个参数用来指定在Javascript中访问这个模块的名字。如果你不指定，默认就会使用这个Objective-C类的名字。
RCT_EXPORT_METHOD 支持所有标准JSON类型，包括：
string (NSString)
number (NSInteger, float, double, CGFloat, NSNumber)
boolean (BOOL, NSNumber)
array (NSArray) 包含本列表中任意类型
object (NSDictionary) 包含string类型的键和本列表中任意类型的值
function (RCTResponseSenderBlock)

如何提供方法供调用？我给点实际的代码以简单的版本号为例代码如下：
OC代码接口提供：
RCT_EXPORT_METHOD(getSVersion:(RCTResponseSenderBlock)callBack){
      NSString *build = [[[NSBundle mainBundle] infoDictionary] objectForKey:@"CFBundleVersion"];
      callBack(@[[NSNull null],build]);
}

Javascript里可以这样调用这个方法：

import { NativeModules } from ‘react-native’; 
 var XXXXManger = NativeModules. XXXXManger; 
 XXXXManger.getSVersion((error,events) =>{ 
 console.log(‘error’, error); 
 console.log(‘events’, events); 
 }); 
 有些人自然要问反过来OC调用RN如何实现？ 
 OC调用RN就简单了通知： 
 [self.bridge.eventDispatcher sendAppEventWithName:@”didReceiveNotification” body:userInfo]; 
 是很不是很熟悉？ 跟iOS的Notification太像了 
 sendAppEventWithName:@”didReceiveNotification” body:userInfo 
 postNotificationName:@”hidenTabbar” object:body 
 这里没什么说的我们继续 
 另外sendAppEventWithName已经过期但还能使用，现在需要将OC调用RN与RN调用CO分开处理上述方法可用一个Manager管理现在分开，自定义类并继承 RCTEventEmitter.h（ #import ）遵循RCTBridgeModule协议 
 然后要导出你所有的方法名字 
 -(NSArray *)supportedEvents 
 { 
 return @[@”isCallback”, @”xxxx”, @”xxxxxx”];//有几个就写几个 
 实现你导出的所有方法，里面都使用 sendEventWithName 方法即可-(void)iseCallback:(NSString*)code result:(NSString*) result { 
 [self sendEventWithName:@”iseCallback” 
 body:@{ 
 @”code”: code, 
 @”result”: result, }]; 
 继续使用sendAppEventWithName：会警告 
 ‘sendDeviceEventWithName:body:’ is deprecated: Subclass RCTEventEmitter instead 
 Javascript里可以这样调用这个方法： 
 import { 
 … 
 NativeModules, 
 NativeEventEmitter, //导入NativeEventEmitter模块 
 } from ‘react-native’;var XXXXManger = NativeModules. XXXXManger; 
 //在组件中使用 
 componentWillMount() { 
 this.listener = NativeEventEmitter.addListener(‘isCallback’, this.isCallback.bind(this)); //对应了原生端的名字 
 } 
 componentWillUnmount() { 
 this.listener && this.listener.remove(); //记得remove哦 
 this.listener = null; 
 } 
 这里说下 EventEmitter 有三种类型 
 sendAppEventWithNamesendDeviceEventWithName
sendInputEventWithName
相对应的Javascript里也有三种类型
RCTAppEventEmitter
RCTDeviceEventEmitter
RCTInputEventEmitter
互相调用已经到此为止了： 
 再来说说RN的界面如何显示OC界面： 
 引入头文件 
#import<React/RCTViewManager.h> 
 并继承RCTViewManager 
 添加宏 RCT_EXPORT_MODULE() 
 重写 - (UIView *)view { 
 return view; 
 } 
 你有可能会用到枚举类型那么你应该导入一下头文件并做如下操作 
#import <React/RCTConvert.h> 
 @implementation RCTConvert(XXXXX)RCT_ENUM_CONVERTER(XXXXX, (@{ 
 @”XXXXX1”: @(XXXXX1), 
 @”XXXXX2”: @(XXXXX2), 
 @”XXXXX3”: @(XXXXX3), 
 }), XXXXX1, unsignedLongLongValue) 
 //#define RCT_ENUM_CONVERTER(type, values, default, getter) //facebook 实现代码// 
 @end• (NSDictionary *) xxxxx { 
 return @{@”XXXXX1”:@(XXXXX1), 
 @”XXXXX2”:@(XXXXX2), 
 @”XXXXX3”:@(XXXXX3)}; 
 }RCT_EXPORT_VIEW_PROPERTY(xxxxx, XXXXX);

这样在Javascript里就可以用枚举类型了。