跟我一起学React Native之调用原生模块

写在前面

这篇文章是“跟我一起学react-native”系列文章的第四篇。这系列文章会随着这个新闻项目的进行更新。想要跟我一起学习React Native的朋友可以关注我的微信公众号iOS进阶指南，或者订阅我的个人博客。

效果图

Share_WebView.png

加载WebView

通过官方文档可以查看WebView组件的详情。

source: 要加载的资源；
injectedJavaScript: 当资源加载完成后要执行的JS字符串；
window.postMessage()会发出一个带有'data'参数的消息；
onMessage来处理postMessage发出的消息，这里是把页面的title作为navigationBar的title。

调用iOS原生模块

建议先阅读官方文档。这里以调用原生的友盟分享为例。（集成友盟分享和项目中info.plist中的相关设置不是这里的主要内容，有需要的可以百度一下。）

1. 项目中新建UShare类作为和RN的桥接类。
   

   UShare_Class.png
2. UShare.m

#import "UShare.h"
#import 
#import 

@interface UShare () 

@end

@implementation UShare
// 把UShare模块名暴露给JS
RCT_EXPORT_MODULE();

// platform: 0 QQ 1 QQ空间 2 微信 3 朋友圈 4 微博
RCT_EXPORT_METHOD(shareToPlatform:(int)platform content:(NSString *)content)
{
  UMSocialPlatformType type = UMSocialPlatformType_UnKnown;
  switch (platform)
  {
    case 0:
      type = UMSocialPlatformType_QQ;
      break;
    case 1:
      type = UMSocialPlatformType_Qzone;
      break;
    case 2:
      type = UMSocialPlatformType_WechatSession;
      break;
    case 3:
      type = UMSocialPlatformType_WechatTimeLine;
      break;
    case 4:
      type = UMSocialPlatformType_Sina;
      break;
  }
// 分享一个纯文本内容作为示例
  UMSocialMessageObject *msgObj = [UMSocialMessageObject messageObject];
  msgObj.text = content;
  [[UMSocialManager defaultManager] shareToPlatform:type messageObject:msgObj currentViewController:[[UIApplication sharedApplication] keyWindow].rootViewController completion:^(id result, NSError *error) {
    
  }];
}

@end

1. 桥接类必须遵守RCTBridgeModule协议
2. 在类的.m文件中添加RCT_EXPORT_MODULE()，这个宏是用来指定暴露给JS的模块名，如果宏中没有参数则使用OC类名，如果OC类名以RCT开头，JS的模块名会去掉前缀。
3. RCT_EXPORT_METHOD：把OC方法暴露给JS模块的宏。注意：OC方法暴露给JS后，JS的方法名是OC方法名中第一个冒号前面的部分，在这里就是shareToPlatform，而不是shareToPlatform: content :，并且暴露给JS的方法都被认为返回void，如果要返回内容需要使用回调。

3. JS中调用

import { NativeModules } from 'react-native'

var share = NativeModules.UShare
share.shareToPlatform(platform, "分享测试")

如果这篇文章能为你提供些许的帮助，我将不胜荣幸。如果你能慷慨的点个赞或者关注我，我将万分感激。