React Native页面调用原生方法
2017-04-01 本文已影响160人
HJXu
有时候我们在写RN页面时候需要用到比较复杂的处理,如果你还不太熟悉如何用JS去写(比如我)或者原生APP中已经实现了这个复杂的功能,那么我们可以考虑在RN页面中调用原生应用中的方法.将处理后的数据再返回给RN页面使用.这个时候我们就需要知道RN页面是如何调用原生方法的
下面根据我自己实际经验来梳理下整个过程:
首先在你要调用的原生类中的.h文件中导入#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>
头文件.
在类后面写上这个<RCTBridgeModule>协议,意思就是要实现这个协议里面的如下图
![](https://img.haomeiwen.com/i1328141/665e3c24e9c21657.png)
然后在.m实现文件中写上
RCT_EXPORT_MODULE();
这个宏.在需要调用的方法中这样写:
![](https://img.haomeiwen.com/i1328141/c06ae33612c5dd96.png)
在RN页面中引入要调用的原生文件
![](https://img.haomeiwen.com/i1328141/868607550217c1d8.png)
方法调用时候:
![](https://img.haomeiwen.com/i1328141/f5f30372ae122bb4.png)
注意:RN页面调用原生方法时候返回值必须是void.只能在异步回调中传回对应数据