在 ReactNative 中使用友盟分享

新建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地址
  有问题可以给我留言