写在前面
这篇文章是“跟我一起学react-native”系列文章的第四篇。这系列文章会随着这个新闻项目的进行更新。想要跟我一起学习React Native的朋友可以关注我的微信公众号iOS进阶指南，或者订阅我的个人博客。
效果图
Share_WebView.png
加载WebView
通过官方文档可以查看WebView组件的详情。
<WebView
source={{ uri: 'https://www.baidu.com/ }}
injectedJavaScript='window.postMessage(document.title)'
onMessage={this.handleMessage}
/>
source: 要加载的资源；
injectedJavaScript: 当资源加载完成后要执行的JS字符串；
window.postMessage()会发出一个带有'data'参数的消息；
onMessage来处理postMessage发出的消息，这里是把页面的title作为navigationBar的title。
调用iOS原生模块
建议先阅读官方文档。这里以调用原生的友盟分享为例。（集成友盟分享和项目中info.plist中的相关设置不是这里的主要内容，有需要的可以百度一下。）
-
项目中新建UShare类作为和RN的桥接类。UShare_Class.png
- UShare.m
#import "UShare.h"
#import <UMSocialCore/UMSocialCore.h>
#import <React/RCTBridgeModule.h>
@interface UShare () <RCTBridgeModule>
@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
- 桥接类必须遵守
RCTBridgeModule协议- 在类的.m文件中添加
RCT_EXPORT_MODULE()，这个宏是用来指定暴露给JS的模块名，如果宏中没有参数则使用OC类名，如果OC类名以RCT开头，JS的模块名会去掉前缀。RCT_EXPORT_METHOD：把OC方法暴露给JS模块的宏。注意：OC方法暴露给JS后，JS的方法名是OC方法名中第一个冒号前面的部分，在这里就是shareToPlatform，而不是shareToPlatform: content :，并且暴露给JS的方法都被认为返回void，如果要返回内容需要使用回调。
- JS中调用
import { NativeModules } from 'react-native'
var share = NativeModules.UShare
share.shareToPlatform(platform, "分享测试")
如果这篇文章能为你提供些许的帮助，我将不胜荣幸。如果你能慷慨的点个赞或者关注我，我将万分感激。
