今天看下iOS原生->RN:

这里有个问题:

* 我这里只能通过rn->ios->rn来是实现
* 如果想直接ios-rn 那个iOS中的CalendarManager的self.bridge是nil,只有先通过rn-ios之后该值才有值.
* 这里没搞明白

如果你研究通了,希望留言告诉我

直接撸代码:

RN:

 /**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
* iOS调用RN:
* 我这里只能通过rn->ios->rn来是实现,
* 如果想直接ios-rn 那个iOS中的CalendarManager的self.bridge是nil,只有先通过rn-ios之后该值才有值.
* 这里没搞明白
*/ import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
NativeModules,
NativeAppEventEmitter
} from 'react-native';
var nativeAppEv;
var CalendarManager = NativeModules.CalendarManager;
export default class NativeAddRN extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
str:''
};
}
render() {
if(this.state.str == '少停'){
return (
<View style={styles.container}>
<Text style={styles.welcome}>
少停
</Text>
</View>
);
}else {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
shaoting
</Text>
</View>
);
} } componentWillMount() { } componentWillMount() {
CalendarManager.RNCallOC();
nativeAppEv= NativeAppEventEmitter.addListener(
'EventReminder',
(reminder) => {
this.setState({
str:reminder
})
}
); } componentWillUnmount() {
nativeAppEv.remove();
}
} const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
}); AppRegistry.registerComponent('NativeAddRN', () => NativeAddRN);

iOS原生:

新建一个类CalendarManager,继承于NSObject,实现协议<RCTBridgeModule>

 //
// CalendarManager.h
// rnAndN
//
// Created by Shaoting Zhou on 2017/2/10.
// Copyright © 2017年 Facebook. All rights reserved.
// #import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>
@interface CalendarManager : NSObject<RCTBridgeModule> @end
 //
// CalendarManager.m
// rnAndN
//
// Created by Shaoting Zhou on 2017/2/10.
// Copyright © 2017年 Facebook. All rights reserved.
// iOS调用原生:
// 我这里只能通过rn->ios->rn来实现,
// 如果想直接ios-rn 那个iOS中的CalendarManager的self.bridge是nil,只有先通过rn-ios之后该值才有值.
// 这里没搞明白
// #import "CalendarManager.h"
#import "RCTBridge.h"
#import "RCTEventDispatcher.h"
@implementation CalendarManager
RCT_EXPORT_MODULE();
@synthesize bridge = _bridge; RCT_EXPORT_METHOD(RNCallOC){
// [self.bridge.eventDispatcher sendAppEventWithName:@"EventReminder" body:@"少停"];
[self.bridge.eventDispatcher sendAppEventWithName:@"EventReminder" body:@"shaoting"]; }
@end

效果就是RN可以收到上面这段代码发过去的值:[self.bridge.eventDispatcher sendAppEventWithName:@"EventReminder" body:@"shaoting"];

现在传参数是好了,至于iOS调用RN的方法,以后有时间再弄一下吧.该回到原生开发了.

演示效果和demo源码:https://github.com/pheromone/IOS-native-and-React-native-interaction



iOS原生和React-Native之间的交互2的更多相关文章

  1. iOS原生 和 react native视图混编

    在iOS原生功能中加入RN,请看之前 写的 RN与iOS交互系列文章.本篇只讲下视图混编. 关键点只有二: 1.通过 RCTRootView 加载RN视图. 2.RN中,只需要AppRegistry. ...

  2. 一个资深iOS开发者对于React Native的看法

    一个资深iOS开发者对于React Native的看法 当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道.   我认为一个js开发者可以使用javasc ...

  3. 现有iOS项目集成React Native过程记录

    在<Mac系统下React Native环境搭建>配置了RN的开发环境,然后,本文记录在现有iOS项目集成React Native的过程,官方推荐使用Cocoapods,项目一开始也是使用 ...

  4. iOS 写给iOS开发者的React Native学习路线(转)

    我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我 ...

  5. 写给iOS开发者的React Native学习路线(转)

    我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我 ...

  6. [转] 一个资深iOS开发者对于React Native的看法

    当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道. 我认为一个js开发者可以使用javascript来构建iPhone应用确实是一件很酷的事情,但是我很 ...

  7. Android原生嵌入React Native

    1.首先集成的项目目录 我使用的是直接按照react-native init Project 的格式来导入的,也就是说,我的Android项目目录是跟node_modules是在一个目录下的. 我们i ...

  8. Flutter介绍 - Flutter,H5,React Native之间的对比

    Flutter介绍 Flutter是Google推出的开源移动应用开发框架.开发者可以通过开发一套代码同时运行在iOS和Android平台. 它使用Dart语言进行开发,并且最终编译成各个平台的Nat ...

  9. 《React Native 精解与实战》书籍连载「iOS 平台与 React Native 混合开发」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  10. 【React Native】在原生和React Native间通信(RN调用原生)

    一.从React Native中调用原生方法(原生模块) 原生模块是JS中也可以使用的Objective-C类.一般来说这样的每一个模块的实例都是在每一次通过JS bridge通信时创建的.他们可以导 ...

随机推荐

  1. PAT 1046 Shortest Distance

    1046 Shortest Distance (20 分)   The task is really simple: given N exits on a highway which forms a ...

  2. postman系列之批量执行接口测试用例

    postman如何批量执行接口测试用例~其实很简单,但是会给我们的工作带来很多方便~ 比如我们写了几十个测试用例,请求都是同一个服务器IP,一旦服务器IP地址从测试环境搬到线上环境,需要修改所有的服务 ...

  3. Jsop的原理

    Jsop的原理:利用script不存在跨域的问题,动态创建script标签,把需要请求的数据源地址赋值给其src属性,并且指定一个回调函数,从而接受到我们想要的数据

  4. suffix array后缀数组

    倍增算法 基本定义子串:字符串 S 的子串 r[i..j],i≤j,表示 r 串中从 i 到 j 这一段也就是顺次排列 r[i],r[i+1],...,r[j]形成的字符串. 后缀:后缀是指从某个位置 ...

  5. this.$route和this.$router的区别

    1. this.$router: 表示全局路由器对象,项目中通过router路由参数注入路由之后,在任何一个页面都可以通过此方法获取到路由器对象,并调用其push(), go()等方法: 2. thi ...

  6. ActiveMQ 消息的重新投递

    正常情况下:consumer 消费完消息后,会发送"标准确认"给 broker,这个确认对象以 MessageAck 类表征: // 省略其他代码.类中定义了各种确认的类型 pub ...

  7. mysql 数据库的CUDR

    mysql删表和建表语句: DROP TABLE IF EXISTS `t_blog_user`;CREATE TABLE `t_blog_user` ( `id` int(11) NOT NULL ...

  8. Python3 ElementTree.tostring()导致标签前辍变为ns0/ns1处理

    一.说明 python中我们经常借助xml.etree.ElementTree对xml进行处理,其中ElementTree.fromstring()将字符串格式化成et对象,ElementTree.t ...

  9. 把旧系统迁移到.Net Core 2.0 日记 (17) --多租户和SoftDelete

    在EF Core 2.0版本中出现了全局过滤新特性即HasQueryFilter,它出现的意义在哪里?能够解决什么问题呢? 通过HasQueryFilter方法来创建过滤器能够允许我们对访问特定数据库 ...

  10. 在项目中使用 SCSS

    背景概述 1. CSS预处理器 css预处理器定义了一种新的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代 ...