今天,记录一下iOS原生和React-Native之间的交互.如果第一次接触最好先移步至 &先看一下怎么在iOS原生中集成react-native模块.
iOS原生和React-Native之间的交互主要通过NativeModules实现.
先看RN-&iOS原生
开发环境版本:
& & &终端新建一个react-native项目或者使用文章建立的demo.
a.先使用Xcode打开,新建一个CalendarManager类,集成自NSObject即可.先在CalendarManager.h中导入相关类和实现协议RCTBridgeModule
CalendarManager.h
Created by Shaoting Zhou on .
Copyright & 2017年 Facebook. All rights reserved.
9 #import &Foundation/Foundation.h&
10 #import &React/RCTBridgeModule.h&
11 #import &React/RCTLog.h&
12 @interface CalendarManager : NSObject&RCTBridgeModule&
b.CalendarManager.m配置,为了实现该协议,需要含有一个宏:RCT_EXPORT_MODULE(),
CalendarManager.m
Created by Shaoting Zhou on .
Copyright & 2017年 Facebook. All rights reserved.
9 #import "CalendarManager.h"
11 @implementation CalendarManager
13 RCT_EXPORT_MODULE();
c.react-native 通过NativeModules来实现传输和接受消息:
AppRegistry,
StyleSheet,
NativeModules
} from 'react-native';
var CalendarManager = NativeModules.CalendarM
1.基本调用:
CalendarManager.m
// 接收传过来的 NSString
RCT_EXPORT_METHOD(addEventOne:(NSString *)name){
NSLog(@"接收传过来的NSString+NSString: %@", name);
CalendarManager.addEventOne('周少停');
2.字符串+字典:
CalendarManager.m
1 // 接收传过来的 NSString + NSDictionary
2 RCT_EXPORT_METHOD(addEventTwo:(NSString *)name details:(NSDictionary *)details)
RCTLogInfo(@"接收传过来的NSString+NSDictionary: %@ %@", name, details);
1 CalendarManager.addEventTwo('周少停',{job:'programmer'});
3.字符串+日期:
CalendarManager.m
1 // 接收传过来的 NSString + date日期
2 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]);
CalendarManager.addEventThree('周少停',);
4.点击调原生+回调
CalendarManager.m
对外提供调用方法,演示Callback
2 RCT_EXPORT_METHOD(testCallbackEventOne:(NSString *)name callback:(RCTResponseSenderBlock)callback)
NSLog(@"%@",name);
NSArray *events=@[@"1", @"2", @"3",@"4"]; //准备回调回去的数据
callback(@[[NSNull null],events]);
// 传原生一个字符串 + 回调
callBackOne = ()=&{
CalendarManager.testCallbackEventOne(('我是RN给原生的'),(error, events) =& {
if (error) {
console.error(error);
alert(events)
5.Promises
CalendarManager.m
//Promises
对外提供调用方法,演示Promise使用
RCT_REMAP_METHOD(testCallbackEventTwo,
resolver:(RCTPromiseResolveBlock)resolve
rejecter:(RCTPromiseRejectBlock)reject)
NSArray *events =@[@"one ",@"two ",@"three"];//准备回调回去的数据
if (events) {
resolve(events);
NSError *error=[NSError errorWithDomain:@"我是Promise回调错误信息..." code:101 userInfo:nil];
reject(@"no_events", @"There were no events", error);
var events=await CalendarManager.testCallbackEventTwo();
alert(events)
}catch(e){
console.error(e);
5.使用原生定义的常量
CalendarManager.m
1 - (NSDictionary *)constantsToExport
return @{ @"ValueOne": @"我是从原生定义的~" };
alert(CalendarManager.ValueOne)
CalendarManager.m
CalendarManager.m
Created by Shaoting Zhou on .
Copyright & 2017年 Facebook. All rights reserved.
9 #import "CalendarManager.h"
11 @implementation CalendarManager
13 RCT_EXPORT_MODULE();
15 // 接收传过来的 NSString
16 RCT_EXPORT_METHOD(addEventOne:(NSString *)name){
NSLog(@"接收传过来的NSString+NSString: %@", name);
19 // 接收传过来的 NSString + NSDictionary
20 RCT_EXPORT_METHOD(addEventTwo:(NSString *)name details:(NSDictionary *)details)
RCTLogInfo(@"接收传过来的NSString+NSDictionary: %@ %@", name, details);
25 // 接收传过来的 NSString + date日期
26 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
34 RCT_EXPORT_METHOD(testCallbackEventOne:(NSString *)name callback:(RCTResponseSenderBlock)callback)
NSLog(@"%@",name);
NSArray *events=@[@"1", @"2", @"3",@"4"]; //准备回调回去的数据
callback(@[[NSNull null],events]);
41 //Promises
对外提供调用方法,演示Promise使用
43 RCT_REMAP_METHOD(testCallbackEventTwo,
resolver:(RCTPromiseResolveBlock)resolve
rejecter:(RCTPromiseRejectBlock)reject)
NSArray *events =@[@"one ",@"two ",@"three"];//准备回调回去的数据
if (events) {
resolve(events);
NSError *error=[NSError errorWithDomain:@"我是Promise回调错误信息..." code:101 userInfo:nil];
reject(@"no_events", @"There were no events", error);
56 - (NSDictionary *)constantsToExport
return @{ @"ValueOne": @"我是从原生定义的~" };
* Sample React Native App
* /facebook/react-native
7 import React, { Component } from 'react';
8 import {
AppRegistry,
StyleSheet,
NativeModules
14 } from 'react-native';
15 var CalendarManager = NativeModules.CalendarM
18 export default class NativeAddRN extends Component {
render() {
&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&
// 传原生一个字符串
passValueToNativeOne = ()=&{
CalendarManager.addEventOne('周少停');
// 传原生一个字符串 + 字典
passValueToNativeTwo = ()=&{
CalendarManager.addEventTwo('周少停',{job:'programmer'});
// 传原生一个字符串 + 日期
passValueToNativeThree = ()=&{
CalendarManager.addEventThree('周少停',);
// 传原生一个字符串 + 回调
callBackOne = ()=&{
CalendarManager.testCallbackEventOne(('我是RN给原生的'),(error, events) =& {
if (error) {
console.error(error);
alert(events)
//Promise回调
async callBackTwo(){
var events=await CalendarManager.testCallbackEventTwo();
alert(events)
}catch(e){
console.error(e);
//使用原生定义的常量
useNativeValue = ()=&{
alert(CalendarManager.ValueOne)
69 const styles = StyleSheet.create({
container: {
marginTop:100
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
86 AppRegistry.registerComponent('NativeAddRN', () =& NativeAddRN);
演示效果和demo源码:
&另:因为react native并不提供清除缓存功能,所以只能通过react native调用原生来实现计算缓存大小和清除缓存功能:
CalendarManager.m
Created by Shaoting Zhou on .
Copyright & 2017年 Facebook. All rights reserved.
9 #import "CalendarManager.h"
10 @implementation CalendarManager
12 RCT_EXPORT_MODULE();
15 RCT_EXPORT_METHOD(cleanCache:(RCTResponseSenderBlock)callback)
NSURLCache *httpCache = [NSURLCache sharedURLCache];
[httpCache removeAllCachedResponses];
NSUInteger cache = [httpCache currentDiskUsage];
callback(@[[NSNull null],@(cache)]);
22 // 计算缓存
RCT_EXPORT_METHOD(cacheSize:(RCTResponseSenderBlock)callback)
NSURLCache *httpCache = [NSURLCache sharedURLCache];
NSUInteger cache = [httpCache currentDiskUsage];
callback(@[[NSNull null],@(cache)]);
再进入清除缓存界面时,就计算缓存大小:
componentWillMount() {
CalendarManager.cacheSize((error, events) =& {
if (error) {
console.error(error);
this.setState({
cache:Math.round(events/1024)
//缓存大小
清除缓存按钮响应时间:
CalendarManager.cleanCache((error, events) =& {
if (error) {
console.error(error);
this.setState({
//这里本应该是清除之后的数据Math.round(events/1024).应该是0才对,但是总是清不干净,我就直接置为0了
&iOS清除缓存源码可以参考该微博项目中的:
安卓待写....
阅读(...) 评论()ReactNative(进阶) 调用iOS原生页面 - 简书
ReactNative(进阶) 调用iOS原生页面
最近在写RN的项目的时候发现有个别页面,实在无法用RN来实现就,迫不得已之下就想必须要使用iOS的原生页面了!在使用原生也页面的时候遇到很多问题,发现都是各种姿势不对(姿势很重要)就在摸索的中,休息时突然得到了上帝佛主观音的提示完成了这伟事情!(废话说完入正题)!
总结之前为什么跳转失败的原因
没有拿到navigation没有拿到navigation没有拿到navigation
一.配置OC关键代码
1.在XCode 中的AppDelegate.h 添加 UINavigationController控件.(这里为什么要添加 UINavigationController 因为在原生的页面跳转是需要 UINavigationController 的控制,或者说大部分跳转不过去是因为在iOS原生页面没有 UINavigationController 没有Navigation又怎么能今天页面的跳转呢?)
@interface AppDelegate : UIResponder &UIApplicationDelegate&
@property (nonatomic, strong) UIWindow *
//关键代码
@property (nonatomic, strong) UINavigationController *
2.在.m文件中让 rootViewController 接受navigation的管理
//关键代码
_nav=[[UINavigationController alloc]initWithRootViewController:rootViewController];
_nav.navigationBarHidden = YES;
self.window.rootViewController = _
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(doNotification:) name:@"RNOpenVC" object:nil];
-(void)doNotification:(NSNotification *)notification
NSLog(@"成功收到===&通知");
//将通知里面的userInfo取出来，使用
[self.nav pushViewControlle:" 你要跳转的页面" animated:YES];
//注意不能在这里移除通知否则pus进去后有pop失效
3.新建 RCTBridgeModule 类 继承 NSObject 封装一个方法使用通知进行消息的传送从而实现页面的跳转这里为什么这样写包含了很多RN与OC之间的通信如果大家想知道可以去的博客看看我就不在这里叙述了
#import &Foundation/Foundation.h&
#import "RCTBridgeModule.h"
@interface RNBridgeModule : NSObject&RCTBridgeModule&
#import "RNBridgeModule.h"
#import "RCTBridge.h"
@implementation RNBridgeModule
@synthesize bridge = _
RCT_EXPORT_MODULE(RNBridgeModule)
//RN跳转原生界面
RCT_EXPORT_METHOD(RNOpenVC:(NSString *)msg){
NSLog(@"RN传入原生界面的数据为:%@",msg);
//主要这里必须使用主线程发送,不然有可能失效
dispatch_async(dispatch_get_main_queue(), ^{
[[NSNotificationCenter defaultCenter]postNotificationName:@"RNOpenVC" object:nil];
到目前为止Xcode就配置完成
1.打开index.ios.js添加对oc代码的引用
//关键代码
NativeModules
} = require('react-native');
var RNBridgeModule = NativeModules.RNBridgeM
2.调用方法
//关键代码
&CustomButton text='React Native调用访问iOS'
onPress={()=&RNBridgeModule.RNOpenVC('测试')}
大概思路就是这样!如果大家还有说不懂我就直接去github下载 我的项目来看看如果大家觉得有帮助给个??Star?Star?Star??
$ git clone /JasonStu/RN2iOSNative.git
$ cd RN2iOSNative
$ npm install
$ react-native run-ios
iOS | ReactNative 开发者React-Native与iOS原生的集成步骤 - 简书
React-Native与iOS原生的集成步骤
最近准备在公司项目中使用RN，但罗马不是一天建成的，没办法将项目中所有的代码都换成RN，而且我也不认为全换成RN就是好的，所以准备先将项目中的一些页面改成RN开发。这篇文章就是与iOS原生集成的步骤。我将项目更新到了github上，里面有很多我自己的理解，希望可以帮到各位读者
如果遇到什么问题可以在评论区回复，或者加QQ群讨论
前提：电脑已经安装过React-Native相关环境;创建：首先我们创建一个iOS项目，我命名为React-iOS；
使用Cocoapods（官方推荐的办法，如果想在项目中使用Cocoapods可以找一下唐巧写的安装教程）
创建Podfile Cocoapods通过解析Podfile指定的工程文件进行依赖安装，我们在工程目录下创建一个Podfile文件： platform :ios, ‘7.0’
target ‘React-iOS’ do
pod 'React-iOS', :path =& './node_modules/react-native', :subspecs =& [
'RCTImage',
'RCTNetwork',
'RCTText',
'RCTWebSocket',
# 添加你的项目中需要的其他三方库
注意：要添加所有你需要的依赖。举例来说，元素如果不添加RCTText依赖就不能运行。
依赖文件安装 进入工程目录，执行$ pod install，就完成了react－native工程包的集成。
打开React-iOS.xcworkspace Cocoapods安装成功之后，工程目录会产生一个React-iOS.xcworkspace的工程文件，我们使用Xcode打开这个工程打开这个工程文件。
不使用Cocoapods，手动集成
1.安装react-native我们在React-iOS项目目录建一个reactnative目录，用于存放我们的react-native相关文件，再创建一个package.json文件，用于初始化react-native。
文件夹截图.png
//package.json
//dependencies中的react指的是React的版本号，react-native就是React-Native的版本号啦~
"name": "React-iOS",
"version": "0.0.1",
"private": true,
"dependencies": {
"react": "^15.3.1",
"react-native": "^0.32.0"
执行安装：$ cd reactnative $ npm install安装成功后，reactnative目录会产生一个node_modules，里面就是react-native依赖的所有项目包。 2.创建index.ios.js文件在reactnative目录下创建index.ios.js文件：
import React, { Component } from 'react';
AppRegistry,
StyleSheet,
TouchableOpacity,
} from 'react-native';
class ReactiOS extends Component {
render() {
&View style={styles.container}&
&Text&Hello World!&/Text&
const styles = StyleSheet.create({
container: {
backgroundColor : 'red ',
height:100,
flexDirection : 'row '
AppRegistry.registerComponent('ReactiOS', () =& ReactiOS);
这就是我们js程序的入口文件。ok，以上我们已经完成react-native的准备工作，接下来要开始集成啦～3.手动集成react-native
添加react-native工程文件由于项目没有使用Cocoapods进行第三方依赖包管理，所有我们需要手动将react－native工程包添加到我们的原生ios工程中。打开reactnative/node_modules/react-native目录，找到相关的项目包，将React相关的工程包手动添加到项目中：添加`react-native/React/React.xcodeproj`到项目中
添加`react-native/Libraries/Network/RCTNetwork.xcodeproj`到项目中
添加`react-native/Libraries/Text/RCTText.xcodeproj`到项目中
添加`react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj`到项目中
添加`react-native/Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj`到项目中
添加的原则是，你需要什么就添加什么工程包。好了，我们已经将React相关工程包手动添加到React-iOS工程项目的reactnative目录下。
添加相关frameworks文件接下来要将相关的frameworks文件添加到工程中，React-iOS -& TARGETS -& React-iOS -& Build Phases -& Link Binary Width Libraries
添加frameworks.png
将所有.a文件选中并添加
添加.a文件.png
添加搜索头文件的地址React-iOS -& TARGETS -& React-iOS -& Build Settings -& Header Search Paths，添加一条$(SRCROOT)/reactnative/node_modules/react-native/React，选择recursive。这样我们就react-native集成到现有的ios工程中了。错误：
解决方法：在React-iOS -& TARGETS -& React-iOS -& Build Phases -& Link Binary Width Libraries中导入libz.1.1.3.tbd，libstdc++.tbd两个文件
通过上面的步骤，就可以将React-Native项目集成到原有的项目中了，我将在下一篇文章中告诉大家如何运行项目中的RN页面，还有RN跳转到原生页面的方法。
一名iOS开发程序猿，正在往前端的路上越走越远。Your browser does not seem to support JavaScript. As a result, your viewing experience will be diminished, and you have been placed in read-only mode.
Please download a browser that supports JavaScript, or enable it if it's disabled (i.e. NoScript).
React Native原生UI封装以及事件处理
React Native原生UI封装以及事件处理
此主题已被删除。只有拥有主题管理权限的用户可以查看。
正在加载更多帖子
<span class="human-readable-number" title="4