#新建ReactNative工程（过程不再赘述）
#下载ios android的分享包，申请各个平台的sdk
#根据友盟分享的文档配置ios和android工程
不同的是需要在初始化中设置类型
如ios需要在程序的最开始处设置
[UMSocialGlobalshareInstance].type=@"react native";
android需要在程序的最开始处设置
Config.shareType="react native";
4.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
5.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','http://dev.umeng.com/images/tab2_1.png','','',0,(code,message) =>{
this.setState({result:message});
alert(message);
});
},
这样即可实现互相调用
6.分享的集成可以看一下友盟的文档，这里的主要思路就是用native调用的方式调用友盟的分享sdk，这里只是提供了一个思路，方法的参数都可以根据需要自行更改。具体实现逻辑可以看以下代码：
有问题可以给我留言
网友评论