美文网首页
React Native页面调用原生方法

React Native页面调用原生方法

作者: HJXu | 来源:发表于2017-04-01 11:53 被阅读160次

    有时候我们在写RN页面时候需要用到比较复杂的处理,如果你还不太熟悉如何用JS去写(比如我)或者原生APP中已经实现了这个复杂的功能,那么我们可以考虑在RN页面中调用原生应用中的方法.将处理后的数据再返回给RN页面使用.这个时候我们就需要知道RN页面是如何调用原生方法的
    下面根据我自己实际经验来梳理下整个过程:
    首先在你要调用的原生类中的.h文件中导入#import <React/RCTBridgeModule.h>
    #import <React/RCTLog.h>头文件.
    在类后面写上这个<RCTBridgeModule>协议,意思就是要实现这个协议里面的如下图

    01.png
    然后在.m实现文件中写上RCT_EXPORT_MODULE();这个宏.
    在需要调用的方法中这样写:
    02.png
    在RN页面中引入要调用的原生文件
    03.png
    方法调用时候:
    04.png
    注意:RN页面调用原生方法时候返回值必须是void.只能在异步回调中传回对应数据

    相关文章

      网友评论

          本文标题:React Native页面调用原生方法

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