在 ReactNative 中使用友盟分享

mymdeep發表於2017-02-04
React

新建ReactNative工程（過程不再贅述）

下載ios android的分享包，申請各個平臺的sdk

根據友盟分享的文件配置ios和android工程

與原生不同的是需要在初始化中設定型別

  • ios需要在程式的最開始處設定
    [UMSocialGlobalshareInstance].type=@"react native";複製程式碼
  • android需要在程式的最開始處設定
    Config.shareType="react native";複製程式碼

    ios部分

    建立一個類引入標頭檔案：#import"RCTBridgeModule.h"
    我們使用的方式是通過js呼叫native部分程式碼
    所以需要使用RCT_EXPORT_MODULE();
    RCT_EXPORT_METHOD(show:(NSString*)text image:(NSString*)image url:(NSString*)url title:(NSString*)title callback:(RCTResponseSenderBlock)callback){
UMSocialMessageObject*messageObject = [UMSocialMessageObjectmessageObject];
messageObject.text= text;
UMShareWebpageObject* webobj = [UMShareWebpageObjectshareObjectWithTitle:titledescr:textthumImage:image];
webobj.webpageUrl= url;
messageObject.shareObject= webobj;
dispatch_sync(dispatch_get_main_queue(), ^{
//主執行緒更新
[[UMSocialManagerdefaultManager]shareToPlatform:UMSocialPlatformType_WechatSessionmessageObject:messageObjectcurrentViewController:selfcompletion:^(iddata,NSError*error) {
NSString*message =nil;
if(!error) {
message = [NSStringstringWithFormat:@"分享成功"];
}
else{
if(error) {
message = [NSStringstringWithFormat:@"失敗原因Code: %d\n",(int)error.code];
}
else{
message = [NSStringstringWithFormat:@"分享失敗"];
}
}
callback( [[NSArrayalloc]initWithObjects:message,nil]);
}];
});
}複製程式碼
    我們是通過show從js中傳入的引數，傳入什麼樣的引數，可以根據不同情況自己設定，關鍵在於回撥Callback要使用RCTResponseSenderBlock型別將結果回撥給js
    js中程式碼處理為：
    RNIOSAlert.show('from react native ','http://dev.umeng.com/images/tab2_1.png','http://dev.umeng.com','fff',
(message) =>{
this.setState({result:message});
alert(message);
});複製程式碼
    回撥中可以有多個字串或多個型別引數，因為RCTResponseSenderBlock的引數是一個NSArray

    android部分：

    建立一個類繼承extendsReactContextBaseJavaModule
    還需要建立一個SharePackage類繼承ReactPackage
    在Application中重寫一下程式碼：
    @Override
protectedListgetPackages() {
returnArrays.asList(
newSharePackage(),newMainReactPackage()
);
}
``
這樣在ShareUtil中就可以寫對應的方法了複製程式碼
    @ReactMethod
    public voidshare(finalString text, finalString img, finalString weburl, finalString title, final intsharemedia, finalCallback successCallback){
    runOnMainThread(newRunnable() {
    @Override
    public voidrun() {
    newShareAction(ma).withText(text)
    .withMedia(newUMImage(contect,img))
    .withTargetUrl(weburl)
    .withTitle(title)
    .setPlatform(getShareMedia(sharemedia))
    .setCallback(newUMShareListener() {
    @Override
    public voidonResult(SHARE_MEDIA share_media) {
    successCallback.invoke(0,"success");
    }
    @Override
    public voidonError(SHARE_MEDIA share_media,Throwable throwable) {
    successCallback.invoke(1,throwable.getMessage());
    }
    @Override
    public voidonCancel(SHARE_MEDIA share_media) {
    successCallback.invoke(2,"cancel");
    }
    })
    .share();
    }
    });
    }
    這裡注意一定要放在主執行緒中，所以用runOnMainThread，這個方法可以在下載的程式碼中看到
js中的程式碼：複製程式碼
    _share:function(){
    ShareView.share('sssss','dev.umeng.com/images/tab2…) =>{
    this.setState({result:message});
    alert(message);
    });
    },
    ```
    這樣即可實現互相呼叫

    總結

    分享的整合可以看一下友盟的文件，這裡的主要思路就是用native呼叫的方式呼叫友盟的分享sdk，這裡只是提供了一個思路，方法的引數都可以根據需要自行更改。具體實現邏輯可以看以下程式碼：
    GitHub地址
    有問題可以給我留言

相關文章