react-native-sharesdk

share sdk for react-native

install

npm i react-native-sharesdk --save

link

react-native link react-native-sharesdk

IOS

qq 微信登录 分享

1. 打开Xcode app项目文件夹, 找到路径为node_modules/react-native-sharesdk/ios/rnsharesdk/ShareSDK的目录 并且拖动到Libraries目录,不要勾选copy items if needed。

2. 在项目中找到Build Settings这一栏, 继续往下找到Framework Search Paths这一节，加入以下这些路径值： $(SRCROOT)/../node_modules/react-native-sharesdk/ios/rnsharesdk/ShareSDK, $(SRCROOT)/../node_modules/react-native-sharesdk/ios/rnsharesdk/ShareSDK/Support/Optional, $(SRCROOT)/../node_modules/react-native-sharesdk/ios/rnsharesdk/ShareSDK/Support/PlatformConnector, $(SRCROOT)/../node_modules/react-native-sharesdk/ios/rnsharesdk/ShareSDK/Support/Required, $(SRCROOT)/../node_modules/react-native-sharesdk/ios/rnsharesdk/ShareSDK/Support/PlatformSDK/QQSDK, 继续找到Library Search Paths这一节，加入以下这些路径值： $(SRCROOT)/../node_modules/react-native-sharesdk/ios/rnsharesdk/ShareSDK/Support/PlatformSDK/WeChatSDK,

3.在项目中找到Build Phases这一栏, 继续往下找到Link Binary With Libraries这一节，加入以下这些库： libicucore.tbd, libz.tbd, libstdc++.tbd, JavaScriptCore.framework, libsqlite3.tbd 具体依赖如下图

4.在项目中找到Info这一栏, 往下找到App Transport Security Settings这一栏，添加新的一行Allow Arbitrary Loads，设置为YES 继续往下找到URL Types这一节，点击+号添加一栏数据，填入qq appid,微信app key 例如:tencent100371282, 100371282 是qq appid. 在URL Types中添加QQ的AppID，其格式为：”QQ” ＋ AppId的16进制（如果appId转换的16进制数不够8位则在前面补0，如转换的是：5FB8B52， 则最终填入为：QQ05FB8B52 注意：转换后的字母要大写） 转换16进制的方法：echo ‘ibase=10;obase=16;801312852′|bc，其中801312852为QQ的AppID

具体细节可参考：ios简洁版快速集成

5.在项目中找到Info这一栏, 添加 LSApplicationQueriesSchemes 设置类型 Array.

具体细节可参考： ios9-对sharesdk的影响

6.添加你的 sharesdk appkey, qq appid 和 appkey 在 node_modules/react-native-sharesdk/ios/rnsharesdk/MobLogin.m

   [ShareSDK registerApp:@"iosv1101"

   onConfiguration:^(SSDKPlatformType platformType, NSMutableDictionary *appInfo) {
               
               switch (platformType)
               {
                   case SSDKPlatformTypeQQ:
                       [appInfo SSDKSetupQQByAppId:@"100371282"
                                            appKey:@"aed9b0303e3ed1e27bae87c33761161d"
                                          authType:SSDKAuthTypeBoth];
                       break;
                   default:
                       break;
               }
           }];

ANDROID

qq 微信登录 分享

1. 添加你的 qq AppId 在 node_modules/react-native-sharesdk/android/build.gradle

defaultConfig {
      ...
      manifestPlaceholders = [
              QQ_APP_ID: "100371282", //qq AppId
      ]
  }

2. 添加你的 qq sharesdk appkey 在 node_modules/react-native-sharesdk/android/src/main/assets/ShareSDK.xml

<ShareSDK
      AppKey = "androidv1101"/> <!-- 修改成你在sharesdk后台注册的应用的appkey"-->

3. 添加你的 qq appid 和 appkey 在 node_modules/react-native-sharesdk/android/src/main/assets/ShareSDK.xml

<!-- ShareByAppClient标识是否使用微博客户端分享，默认是false -->
  <QQ
      Id="7"
      SortId="7"
      AppId="100371282"
      AppKey="aed9b0303e3ed1e27bae87c33761161d"
      ShareByAppClient="true"
      Enable="true" />

usage

...
import { NativeModules } from 'react-native'
const {MobLogin} = NativeModules

...
_onPressQQLogin() {
    MobLogin.loginWithQQ().then((data) => {
      console.log('token: ', data.token)
      console.log('user_id: ', data.user_id)
      console.log('user_name: ', data.user_name)
      console.log('user_gender: ', data.user_gender)
      console.log('user_icon: ', data.user_icon)
    }, (err) => {
      console.log(err)
    })
  }

  _onPressWeChatLogin() {
    MobLogin.loginWithWeChat().then((data) => {
      console.log('token: ', data.token)
      console.log('user_id: ', data.user_id)
      console.log('user_name: ', data.user_name)
      console.log('user_gender: ', data.user_gender)
      console.log('user_icon: ', data.user_icon)
    }, (err) => {
      console.log(err)
    })
  }

  _onPressShare() {
    MobLogin.showShare('我是标题', '分享什么内容')
  }

render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity style={styles.qqlogin} onPress={()=>this._onPressLogin()}>
          <Text style={{fontSize: 18, color: 'black'}}>QQLogin</Text>
        </TouchableOpacity>
        ....
      </View>
    )
}