iOS 和React Native 交互

RN和iOS的交互其实就是数据相互传输，想明白这一点就成功了一大半了！！！
举个例子：RN中还有一些无法实现的功能，因此可以，你可以将RN中的数据传递给iOS， iOS处理完后再传递给RN就可以了
准备:
终端新建一个�react-native项目或者使用上一篇文章建立的demo.
a.先使用Xcode打开,新建一个CalendarManager类,集成自NSObject即可.先在CalendarManager.h中导入相关类和实现协议RCTBridgeModule

    #import <Foundation/Foundation.h>
    #import <React/RCTBridgeModule.h>
    #import <React/RCTLog.h>
    @interface CalendarManager : NSObject<RCTBridgeModule>
@end

b.CalendarManager.m配置,为了实现该协议,需要含有一个宏:RCT_EXPORT_MODULE(),

#import "CalendarManager.h" 
@implementation CalendarManager
RCT_EXPORT_MODULE();

c.react-native 通过NativeModules来实现传输和接受消息:

import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    NativeModules  
} from 'react-native';
var CalendarManager = NativeModules.CalendarManager;

1.1基本调用(将RN中的数据(字符串)传递给iOS)(iOS端代码):
CalendarManager.m

// 接收传过来的 NSString
    RCT_EXPORT_METHOD(addEventOne:(NSString *)name){
   NSLog(@"接收传过来的NSString+NSString: %@", name);
}

1.2将RN中的数据(字符串)传递给iOS(RN端代码):

CalendarManager.addEventOne('周少停');

2.1将RN中的数据(字符串+字典:)传递给iOS(iOS端代码):
CalendarManager.m

 // 接收传过来的 NSString + NSDictionary
 RCT_EXPORT_METHOD(addEventTwo:(NSString *)name details:(NSDictionary *)details)
 {
   RCTLogInfo(@"接收传过来的NSString+NSDictionary: %@ %@", name, details);
 }

2.2将RN中的数据(字符串+字典:)传递给iOS(RN端代码):

 CalendarManager.addEventTwo('周少停',{job:'programmer'});

3.1将RN中的数据(字符串+日期)传递给iOS字符串+日期(iOS段代码):
CalendarManager.m

// 接收传过来的 NSString + date日期
 RCT_EXPORT_METHOD(addEventThree:(NSString *)name date:(NSDate *)date)
 {
    NSDateFormatter *formatter = [[NSDateFormatter alloc] init] ;
    [formatter setDateFormat:@"yyyy-MM-dd"];
   RCTLogInfo(@"接收传过来的NSString+NSDictionary: %@ %@", name, [formatter stringFromDate:date]);
 }

3.2将RN中的数据(字符串+日期)传递给iOS字符串+日期(RN段代码):

CalendarManager.addEventThree('周少停',19910730);

4.1将RN中的字符串传递给iOS + 回调(将iOS中的数据传递给RN) (iOS端代码)
CalendarManager.m

 //  对外提供调用方法,演示Callback
 RCT_EXPORT_METHOD(testCallbackEventOne:(NSString *)name callback:(RCTResponseSenderBlock)callback)
 {
   NSLog(@"%@",name);
   NSArray *events=@[@"1", @"2", @"3",@"4"]; //准备回调回去的数据
   callback(@[[NSNull null],events]);
 }

4.2将RN中的字符串传递给iOS + 回调(将iOS中的数据传递给RN) (RN端代码)

  // 传原生一个字符串 + 回调
   callBackOne = ()=>{
  CalendarManager.testCallbackEventOne(('我是RN给原生的'),(error, events) => {
        if (error) {
              console.error(error);
         } else {
               alert(events)
         }
      })
  }

5.1Promises(将iOS端的数据选择性的传递给RN)(iOS端代码)
CalendarManager.m

//  对外提供调用方法,演示Promise使用
RCT_REMAP_METHOD(testCallbackEventTwo,
                 resolver:(RCTPromiseResolveBlock)resolve
                 rejecter:(RCTPromiseRejectBlock)reject)
{
  NSArray *events =@[@"one ",@"two ",@"three"];//准备回调回去的数据
  if (events) {
    resolve(events);
  } else {
    NSError *error=[NSError errorWithDomain:@"我是Promise回调错误信息..." code:101 userInfo:nil];
    reject(@"no_events", @"There were no events", error);
  }
}

5.2将iOS端的数据选择性的传递给RN(RN端代码):

try{
       var events=await CalendarManager.testCallbackEventTwo();
       alert(events)
 }catch(e){
        console.error(e);
 }

6.1使用原生定义的常量(直接通过RN端直接方位iOS中的常量)(iOS端代码)
CalendarManager.m

 - (NSDictionary *)constantsToExport
 {
   return @{ @"ValueOne": @"我是从原生定义的~" };
 }

6.2使用原生定义的常量(直接通过RN端直接方位iOS中的常量)(RN端代码)

alert(CalendarManager.ValueOne)

完整代码:
CalendarManager.m

 #import "CalendarManager.h"

 @implementation CalendarManager
 
 RCT_EXPORT_MODULE();
 
 // 接收传过来的 NSString
 RCT_EXPORT_METHOD(addEventOne:(NSString *)name){
   NSLog(@"接收传过来的NSString+NSString: %@", name);
 }
 // 接收传过来的 NSString + NSDictionary
 RCT_EXPORT_METHOD(addEventTwo:(NSString *)name details:(NSDictionary *)details)
 {
   RCTLogInfo(@"接收传过来的NSString+NSDictionary: %@ %@", name, details);
 }
 
 // 接收传过来的 NSString + date日期
 RCT_EXPORT_METHOD(addEventThree:(NSString *)name date:(NSDate *)date)
 {
    NSDateFormatter *formatter = [[NSDateFormatter alloc] init] ;
    [formatter setDateFormat:@"yyyy-MM-dd"];
   RCTLogInfo(@"接收传过来的NSString+NSDictionary: %@ %@", name, [formatter stringFromDate:date]);
 }
 
//  对外提供调用方法,演示Callback
RCT_EXPORT_METHOD(testCallbackEventOne:(NSString *)name callback:(RCTResponseSenderBlock)callback)
{
  NSLog(@"%@",name);
  NSArray *events=@[@"1", @"2", @"3",@"4"]; //准备回调回去的数据
  callback(@[[NSNull null],events]);
}

//Promises
//  对外提供调用方法,演示Promise使用
RCT_REMAP_METHOD(testCallbackEventTwo,
                 resolver:(RCTPromiseResolveBlock)resolve
                 rejecter:(RCTPromiseRejectBlock)reject)
{
  NSArray *events =@[@"one ",@"two ",@"three"];//准备回调回去的数据
  if (events) {
    resolve(events);
  } else {
    NSError *error=[NSError errorWithDomain:@"我是Promise回调错误信息..." code:101 userInfo:nil];
    reject(@"no_events", @"There were no events", error);
  }
}

- (NSDictionary *)constantsToExport
{
  return @{ @"ValueOne": @"我是从原生定义的~" };
}
@end

RN:

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    NativeModules
} from 'react-native';
var CalendarManager = NativeModules.CalendarManager;


export default class NativeAddRN extends Component {
    render() {
        return (
            <View style={styles.container}>
              <Text style={styles.welcome} onPress={()=>this.passValueToNativeOne()}>点击往原生传字符串</Text>
              <Text style={styles.welcome} onPress={()=>this.passValueToNativeTwo()}>点击往原生传字符串+字典</Text>
              <Text style={styles.welcome} onPress={()=>this.passValueToNativeThree()}>点击往原生传字符串+日期</Text>
              <Text style={styles.welcome} onPress={()=>this.callBackOne()}>点击调原生+回调</Text>
              <Text style={styles.welcome} onPress={()=>this.callBackTwo()}>Promises</Text>
              <Text style={styles.welcome} onPress={()=>this.useNativeValue()}>使用原生定义的常量</Text>
            </View>
        );
    }
    // 传原生一个字符串
    passValueToNativeOne = ()=>{
        CalendarManager.addEventOne('周少停');
    }
    // 传原生一个字符串 + 字典
    passValueToNativeTwo = ()=>{
        CalendarManager.addEventTwo('周少停',{job:'programmer'});
    }
    // 传原生一个字符串 + 日期
    passValueToNativeThree = ()=>{
        CalendarManager.addEventThree('周少停',19910730);
    }
    // 传原生一个字符串 + 回调
    callBackOne = ()=>{
        CalendarManager.testCallbackEventOne(('我是RN给原生的'),(error, events) => {
            if (error) {
                console.error(error);
            } else {
                alert(events)
            }
        })
    }
    //Promise回调
    async callBackTwo(){
        try{
            var events=await CalendarManager.testCallbackEventTwo();
            alert(events)
        }catch(e){
            console.error(e);
        }
    }
    //使用原生定义的常量
    useNativeValue = ()=>{
        alert(CalendarManager.ValueOne)
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop:100
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

AppRegistry.registerComponent('NativeAddRN', () => NativeAddRN);

另:因为react native并不提供清除缓存功能,所以只能通过react native调用原生来实现计算缓存大小和清除缓存功能:
iOS:

 #import "CalendarManager.h"
@implementation CalendarManager

RCT_EXPORT_MODULE();

//  清理缓存
RCT_EXPORT_METHOD(cleanCache:(RCTResponseSenderBlock)callback)
{
  NSURLCache *httpCache = [NSURLCache sharedURLCache];
  [httpCache removeAllCachedResponses];
  NSUInteger cache = [httpCache currentDiskUsage];
  callback(@[[NSNull null],@(cache)]);
}
// 计算缓存
 RCT_EXPORT_METHOD(cacheSize:(RCTResponseSenderBlock)callback)
 {
   NSURLCache *httpCache = [NSURLCache sharedURLCache];
   NSUInteger cache = [httpCache currentDiskUsage];
   callback(@[[NSNull null],@(cache)]);
 }
@end

RN:
再进入清除缓存界面时,就计算缓存大小:

componentWillMount() {
         CalendarManager.cacheSize((error, events) => {
             if (error) {
                 console.error(error);
             } else {
                 this.setState({
                     cache:Math.round(events/1024)   //缓存大小
                 })
            }
        })
    }

清除缓存按钮响应时间:

clearRom  =()=>{
         CalendarManager.cleanCache((error, events) => {
             if (error) {
                 console.error(error);
             } else {
                 this.setState({
                     cache:0  //这里本应该是清除之后的数据Math.round(events/1024).应该是0才对,但是总是清不干净,我就直接置为0了
                 })
             }
        })
    }

文章来源：http://www.cnblogs.com/shaoting/p/6392390.html

最后编辑于：2017.12.06 04:55:57

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 216,544评论 6赞 501
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,430评论 3赞 392
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 162,764评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,193评论 1赞 292
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,216评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,182评论 1赞 299
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,063评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,917评论 0赞 274
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,329评论 1赞 310
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,543评论 2赞 332
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,722评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,425评论 5赞 343
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,019评论 3赞 326
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,671评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,825评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,729评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,614评论 2赞 353

iOS 和React Native 交互

推荐阅读更多精彩内容