美文网首页
RN和iOS原生互相通信

RN和iOS原生互相通信

作者: Har_vey | 来源:发表于2017-07-18 10:45 被阅读214次

一、首先上代码 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

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

相关文章

网友评论

      本文标题:RN和iOS原生互相通信

      本文链接:https://www.haomeiwen.com/subject/kebckxtx.html