React Native使用友盟集成第三方（QQ、微博、微信）登

首先去友盟官网()下载所需要的SDK
image.png
下载下来的SDK文件夹包含的内容如下图所示，Android文件夹中的内容为配置Android原生项目需要的文件，iOS文件夹中的内容为配置ios原生项目需要的文件。ReactNative文件夹中的内容RN和原生交互需要配置的文件

image.png
根据友盟的开发文档()以iOS为例介绍下配置过程
（1）首先将ios文件夹中的common和share文件夹添加到iOS项目中
12092998-4f26879c3445ac80.png
（2）然后将与RN交互的桥接文件(在ReactNative文件夹中)添加到iOS项目中
5E35DE18-81DB-4120-95CC-B37B3BAA5358.jpeg
（3）在 Appdelegate.m 中设置初始化代码

#import "RNUMConfigure.h"

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [UMConfigure setLogEnabled:YES];
  [RNUMConfigure initWithAppkey:@"599d6d81c62dca07c5001db6" channel:@"App Store"];
  ...
}

image.png image.png
image.png

配置SSO白名单

<key>LSApplicationQueriesSchemes</key>
<array>
    <!-- 微信 URL Scheme 白名单-->
    <string>wechat</string>
    <string>weixin</string>

    <!-- 新浪微博 URL Scheme 白名单-->
    <string>sinaweibohd</string>
    <string>sinaweibo</string>
    <string>sinaweibosso</string>
    <string>weibosdk</string>
    <string>weibosdk2.5</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>

image.png
image.png
image.png

#import <UMShare/UMShare.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

    // UMConfigure 通用设置，请参考SDKs集成做统一初始化。
    // 以下仅列出U-Share初始化部分

    // U-Share 平台设置
    [self configUSharePlatforms];
    [self confitUShareSettings];

    // Custom code

    return YES;
}

- (void)confitUShareSettings
{
    /*
     * 打开图片水印
     */
    //[UMSocialGlobal shareInstance].isUsingWaterMark = YES;

    /*
     * 关闭强制验证https，可允许http图片分享，但需要在info.plist设置安全域名
     <key>NSAppTransportSecurity</key>
     <dict>
     <key>NSAllowsArbitraryLoads</key>
     <true/>
     </dict>
     */
    //[UMSocialGlobal shareInstance].isUsingHttpsWhenShareContent = NO;

}

- (void)configUSharePlatforms
{
    /* 设置微信的appKey和appSecret */
    [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_WechatSession appKey:@"wxdc1e388c3822c80b" appSecret:@"3baf1193c85774b3fd9d18447d76cab0" 
    /*
     * 移除相应平台的分享，如微信收藏
     */
    //[[UMSocialManager defaultManager] removePlatformProviderWithPlatformTypes:@[@(UMSocialPlatformType_WechatFavorite)]];

    /* 设置分享到QQ互联的appID
     * U-Share SDK为了兼容大部分平台命名，统一用appKey和appSecret进行参数设置，而QQ平台仅需将appID作为U-Share的appKey参数传进即可。
    */
    [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_QQ appKey:@"1105821097"/*设置QQ平台的appID*/  appSecret:nil 

    /* 设置新浪的appKey和appSecret */
    [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_Sina appKey:@"3921700954"  appSecret:@"04b48b094faeb16683c32669824ebdad" 
}

设置系统回调

// 支持所有iOS系统
- (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;
}

在RN中进行调用
将React Native Common/common_reactnative_2.0.0/js中的ShareUtil.js文件加到RN工程中

image.png

在需要的地方进行引用，并调用

/**
 * Sample React Native App
 * 
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    TouchableOpacity
} from 'react-native';
import ShareUtile from './ShareUtil'


type Props = {};
export default class App extends Component<Props> {
  constructor(props){
    super(props)

      this.state={
         result:''
      }


  }
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={()=>this._loginToQQ()}>
          <Text style={styles.welcome}>QQ登录</Text>
        </TouchableOpacity>

        <TouchableOpacity onPress={()=>this._loginToWeibo()}>
          <Text style={styles.welcome}>微博登录</Text>
        </TouchableOpacity>

        <Text style={styles.instructions}>{this.state.result}</Text>
      </View>
    );
  }

  _loginToQQ(){
      try {
          ShareUtile.auth(0,(code,result,message) =>{
              console.log(code,result,message)
              this.setState({result:message});
              if (code == 200){
                  this.setState({result:result.uid});
              }
          });
      }catch(e){
          console.log(e)
      }
  }

  _loginToWeibo(){
      ShareUtile.auth(1,(code,result,message) =>{
          console.log(code,result,message)
          this.setState({result:message.error});
          if (code == 200){
              this.setState({result:result.uid});
          }
      });
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    marginTop:50,
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});