寫在前面
這篇文章是“跟我一起學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, "分享測試")
如果這篇文章能為你提供些許的幫助，我將不勝榮幸。如果你能慷慨的點個贊或者關注我，我將萬分感激。
