RN和iOS原生互相通信

一、首先上代码 demo
打开ios工程,可以看到创建了CustomViewManager和CustomView这两个类。CustomView是我们调用iOS原生创建的一个组件,以供React 调用。该组件的样式如图:

image.png

下面我们将通过调用该组件,在RN端对组件上的两个label进行赋值。

一、 回到我们的CustomViewManager.h中,

image.png

可以看见在这个文件下的类名我们是该过名字的,如果不更改的话,RN端将调用失效(目前还不知道是什么原因)。同时这个类继承自RCTViewManager 并且遵守了RCTBridgeModule
再看CustomViewManager.m文件中,首先我们引入了CustomView.h这个类,同时实现了view的getter方法

image.png

在CustomView.h文件中,我们暴露了两个属性:titleString 和 contentString,
。回到CustomViewManager.m,我们生命了这两个属性供RN端调用

image.png

三、 最后在RN端调用这个View组件,在CustomView.js文件中,我们把CustomView这个组件封装成了一个JS组件。
在index.ios.js中

image.png

我们这样来调用这个组件进行了属性的传递。

四、 处理在RN中的回调函数。
目前我们要实现这样一个事情,

image.png

点击“点我”按钮,调用原生组件弹出一个选择框,用户选择“确定”或者“取消”,同时我们需要把这个选择传递到RN端,刷新“等待用户操作”这个Text组件。
4.1)回到CustomViewManager.h文件中,用RCT_EXPORT_METHOD()这个宏,导出一个方法

image.png
同时实现这个UIAlertView的协议,
image.png
接着在RN端调用这个方法。
image.png
image.png

自此,我们已经实现了这个效果。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,270评论 25 709
  • 本篇文章是讲述 iOS 无埋点数据收集 SDK 系列的第二篇。在第一篇 中主要介绍了 SDK 整体实现思路以及...
    zerygao阅读 14,212评论 4 64
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,200评论 4 61
  • 两年了,自己已不是当年那个懵懂的少女,而是稳重、干练的女子。如今的自己已没有当年的忐忑,而是多了一份成熟、一份...
    叶语无声阅读 1,430评论 0 1
  • 2017-07-05 23:34 成功要付出代价这事大家都明白,但这个代价有多大,普通人能想到吗?就算想到了,愿意...
    夜雨狂歌如梦阅读 1,839评论 0 0