本文以QQ和微信为例(首先需要申请相应平台的AppKey 和 AppSecret)

1 到UM官网下载SDK(点击社会化分享->点击设置选择要使用的平台)
https://developer.umeng.com/sdk/reactnative
下载包包含(RN IOS Android)

屏幕快照 2018-06-22 下午1.37.08.png

屏幕快照 2018-06-22 下午1.43.06.png

屏幕快照 2018-06-22 下午1.43.17.png

屏幕快照 2018-06-22 下午1.45.21.png

一 集成iOS
1.直接将整理好的文件夹拖入你的工程(包含 上图中的iOS文件夹和ReactNative文件夹下的common_ios和share_ios)
添加平台库(由于本文使用的精简版只需要添加一下两个)
详情:https://developer.umeng.com/docs/66632/detail/66825

libsqlite3.tbd
CoreGraphics.framework

2.在AppDelegate.m中注册友盟Appkey和相应平台Key以及注册回调

#import "RNUMConfigure.h"
#import <UMShare/UMShare.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [UMConfigure setLogEnabled:YES];
  [RNUMConfigure initWithAppkey:@"umk" channel:@"App Store"];
  
  [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_WechatSession appKey:@"wxk" appSecret:@"wxs" redirectURL:@"url"];
  [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_QQ appKey:@"qqk" appSecret:nil redirectURL:@"url"];
}

//设置系统回调 支持所有iOS系统 
//注：此方法在swift4.1(Xcode 9.3)已废弃，Objective-C项目不影响。 新浪 平台外的其他平台可在使用另外两种回调方法。请看官方文档
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
  //6.3的新的API调用，是为了兼容国外平台(例如:新版facebookSDK,VK等)的调用[如果用6.2的api调用会没有回调],对国内平台没有影响
  BOOL result = [[UMSocialManager defaultManager] handleOpenURL:url sourceApplication:sourceApplication annotation:annotation];
  if (!result) {
    // 其他如支付等SDK的回调
  }
  return result;
}

3.在Info.plist文件中 (添加SSO白名单) 和 (配置URL Scheme)

<key>LSApplicationQueriesSchemes</key>
<array>
    <!-- 微信 URL Scheme 白名单-->
    <string>wechat</string>
    <string>weixin</string>
    <!-- QQ、Qzone URL Scheme 白名单-->
    <string>mqqapi</string>
    <string>mqq</string>
    <string>mqqOpensdkSSoLogin</string>
    <string>mqqconnect</string>
    <string>mqqopensdkdataline</string>
    <string>mqqopensdkgrouptribeshare</string>
    <string>mqqopensdkfriend</string>
    <string>mqqopensdkapi</string>
    <string>mqqopensdkapiV2</string>
    <string>mqqopensdkapiV3</string>
    <string>mqqopensdkapiV4</string>
    <string>mqzoneopensdk</string>
    <string>wtloginmqq</string>
    <string>wtloginmqq2</string>
    <string>mqqwpa</string>
    <string>mqzone</string>
    <string>mqzonev2</string>
    <string>mqzoneshare</string>
    <string>wtloginqzone</string>
    <string>mqzonewx</string>
    <string>mqzoneopensdkapiV2</string>
    <string>mqzoneopensdkapi19</string>
    <string>mqzoneopensdkapi</string>
    <string>mqqbrowser</string>
    <string>mttbrowser</string>
    <string>tim</string>
    <string>timapi</string>
    <string>timopensdkfriend</string>
    <string>timwpa</string>
    <string>timgamebindinggroup</string>
    <string>timapiwallet</string>
    <string>timOpensdkSSoLogin</string>
    <string>wtlogintim</string>
    <string>timopensdkgrouptribeshare</string>
    <string>timopensdkapiV4</string>
    <string>timgamebindinggroup</string>
    <string>timopensdkdataline</string>
    <string>wtlogintimV1</string>
    <string>timapiV1</string>
</array>

11474533850_.pic_hd.jpeg

QQ:
1、"tencent"+腾讯QQ互联应用appID,如tencent100424468
2、“QQ”+腾讯QQ互联应用appID转换成十六进制(不足8位前面补0),如: QQ05fc5b14

微信:
直接只用微信平台提供的key,如wxdc1e388c3822c80b
共三个URLTypes

二. 集成安卓

屏幕快照 2018-06-22 下午2.20.14.png

屏幕快照 2018-06-22 下午2.20.28.png

2.在build.gradle添加引用

dependencies {
   compile fileTree(include: ['*.jar'], dir: 'libs')
   compile 'com.android.support:appcompat-v7:23.0.1'
   compile 'com.facebook.react:react-native:+'
   // From node_modules
   compile files('libs/umeng-common-1.5.3.jar')
   compile files('libs/umeng-sharetool-6.9.2.jar')
   compile files('libs/umeng-shareboard-widget-6.9.2.jar')
   compile files('libs/umeng-share-wechat-simplify-6.9.2.jar')
   compile files('libs/umeng-share-QQ-simplify-6.9.2.jar')
   compile files('libs/umeng-share-core-6.9.2.jar')
}

屏幕快照 2018-06-22 下午2.25.09.png

屏幕快照 2018-06-22 下午2.25.41.png

4.为了方便管理在java文件包名目录下创建两个包文件夹um和wxapi
4.1.将ReactNative下的(common_android和share_android中的文件导入um包)
4.2.在wxapi文件夹下创建一个类WXEntryActivity并继承WXCallbackActivity

屏幕快照 2018-06-22 下午2.35.11.png

5.添加权限和平台配置（注意:修改tencent-appkey和UM appkey Channel ID）

    <!-- UM必须的权限 -->
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />

    <!-- UM推荐的权限 -->
    <!-- UM添加如下权限，以便使用更多的第三方SDK和更精准的统计数据 -->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

    ...

<application

        ...

        <!--QQ-->
        <activity
            android:name="com.tencent.tauth.AuthActivity"
            android:launchMode="singleTask"
            android:noHistory="true" >
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />

                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />

                <data android:scheme="tencent100424468" />
            </intent-filter>
        </activity>
        <activity
            android:name="com.tencent.connect.common.AssistActivity"
            android:theme="@android:style/Theme.Translucent.NoTitleBar"
            android:configChanges="orientation|keyboardHidden|screenSize"/>

        <!--WeChat-->
        <activity
            android:name=".wxapi.WXEntryActivity"
            android:configChanges="keyboardHidden|orientation|screenSize"
            android:exported="true"
            android:theme="@android:style/Theme.Translucent.NoTitleBar" />

        <!--兼容旧版的SDK-->
        <meta-data android:value="YOUR_APP_KEY" android:name="UMENG_APPKEY"/>
        <meta-data android:value="Channel ID" android:name="UMENG_CHANNEL"/>
    </application>

6.在MainApplication文件下(添加一个包new DplusReactPackage(),配置umk wxk wxs qqid)

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
              new DplusReactPackage()
      );
    }


  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);

    Config.shareType = "react native";
    UMConfigure.init(this,"umk","umeng",UMConfigure.DEVICE_TYPE_PHONE,"");
  }

  // 配置平台，将AppKey 和 AppSecret 换成你申请的即可
  // 【注意】QQ 和 QQ 空间是同一个设置（同一个key、AppSecret）
  {
    PlatformConfig.setWeixin("wxk", "wxs");
    PlatformConfig.setQQZone("qqid", "");
  }

7.在MainActivity中注册模块和回调添加两个方法

ublic class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "studyUMR";
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ShareModule.initSocialSDK(this);
    }

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        UMShareAPI.get(this).onActivityResult(requestCode, resultCode, data);
    }
}

三.ReactNative使用就很简单了
整理好的ReactNative文件夹中有一个js文件夹里面包含三个文件
AnalyticsUtil.js是友盟统计
PushUtil.js是友盟推送
ShareUtil.js是友盟登录和分享

我们只使用ShareUtil.js

import UMShareModule from './Components/UMjs/ShareUtil'

...

       // 0    QQ
       // 2    微信
       // 3    朋友圈
       // 4    QQ空间

       授权登录
       UMShareModule.auth(0,(code,result,message) =>{
           console.log(code,result,message);
       });
       调用模板分享
       UMShareModule.shareboard(
           '标题',
           'http://dev.umeng.com/images/tab2_1.png',
           'http://baidu.com',
           'title',[0,2,3,4],(code,message) =>{
               console.log(code,message);
       });

四.关于IOS QQ TIM登录无法获取用户信息的BUG
但是QQ授权可以成功所以需要修改UMShareModule.m中的方法判断如果是QQ登录获取用户信息则自行获取

RCT_EXPORT_METHOD(auth:(NSInteger)platform completion:(RCTResponseSenderBlock)completion)
{
 UMSocialPlatformType plf = [self platformType:platform];
 if (plf == UMSocialPlatformType_UnKnown) {
   if (completion) {
     completion(@[@(UMSocialPlatformType_UnKnown), @"invalid platform"]);
     return;
   }
 }
 
 if (UMSocialPlatformType_QQ == plf) {
   __weak typeof(self) weakSelf = self;
   
   [[UMSocialManager defaultManager] authWithPlatform:plf currentViewController:nil completion:^(id result, NSError *error) {
     
     //    "ret":0, // 返回码
     //    "msg":"", // 错误信息，red<0
     //    "nickname":"Peter", //呢称
     //    "figureurl":"http://qzapp.qlogo.cn/qzapp/111111/942FEA70050EEAFBD4DCE2C1FC775E56/30", //30x30
     //    "figureurl_1":"http://qzapp.qlogo.cn/qzapp/111111/942FEA70050EEAFBD4DCE2C1FC775E56/50", //50x50
     //    "figureurl_2":"http://qzapp.qlogo.cn/qzapp/111111/942FEA70050EEAFBD4DCE2C1FC775E56/100",//100x100
     //    "gender":"男",//性别
     //    "vip":"1", //黄钻用户
     //    "level":"7",//黄钻等级
     //    "is_yellow_year_vip":"1"//年费黄钻用户
     
     UMSocialUserInfoResponse *authInfo = result;
     NSString *url = @"https://graph.qq.com/user/get_user_info";
     NSDictionary *parameters = @{@"access_token":authInfo.accessToken,@"openid":authInfo.openid,@"oauth_consumer_key":@"1105307876"};
     [weakSelf GET:url parameters:parameters success:^(id result) {
       
       NSMutableDictionary *retDict = [NSMutableDictionary dictionaryWithCapacity:5];
       retDict[@"name"] = result[@"nickname"];
       retDict[@"iconurl"] = result[@"figureurl_2"];
       retDict[@"gender"] = result[@"gender"];
       retDict[@"city"] = result[@"city"];
       retDict[@"province"] = result[@"province"];
       
       completion(@[@200, retDict, @""]);
     } failed:^(NSError *error) {
       NSLog(@"-----%@",error);
     }];
   }];
 }else{
   [[UMSocialManager defaultManager] getUserInfoWithPlatform:plf currentViewController:nil completion:^(id result, NSError *error) {
     if (completion) {
       if (error) {
         NSString *msg = error.userInfo[@"NSLocalizedFailureReason"];
         if (!msg) {
           msg = error.userInfo[@"message"];
         }if (!msg) {
           msg = @"share failed";
         }
         NSInteger stCode = error.code;
         if(stCode == 2009){
           stCode = -1;
         }
         completion(@[@(stCode), @{}, msg]);
       } else {
         UMSocialUserInfoResponse *authInfo = result;
         
         NSMutableDictionary *retDict = [NSMutableDictionary dictionaryWithCapacity:8];
         retDict[@"uid"] = authInfo.uid;
         retDict[@"openid"] = authInfo.openid;
         retDict[@"unionid"] = authInfo.unionId;
         retDict[@"accessToken"] = authInfo.accessToken;
         retDict[@"refreshToken"] = authInfo.refreshToken;
         retDict[@"expiration"] = authInfo.expiration;
         
         retDict[@"name"] = authInfo.name;
         retDict[@"iconurl"] = authInfo.iconurl;
         retDict[@"gender"] = authInfo.unionGender;
         
         NSDictionary *originInfo = authInfo.originalResponse;
         retDict[@"city"] = originInfo[@"city"];
         retDict[@"province"] = originInfo[@"province"];
         retDict[@"country"] = originInfo[@"country"];
         
         completion(@[@200, retDict, @""]);
       }
     }
   }];
 }
 
}