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"这一栏, 继续往下找到"URL Types"这一节，点击"+"号添加一栏数据，填入qq appid,微信app key 例如:tencent100371282, 100371282 是qq appid.

5.Under the "Info" tab of your project configuration, add LSApplicationQueriesSchemes of type Array For QQ SDK.

### items details from LSApplicationQueriesSchemes

6.specify your sharesdk appkey, qq appid and appkey in 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 login

1. specify your qq AppId in node_modules/react-native-sharesdk/android/build.gradle

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

1. specify your sharesdk appkey in node_modules/react-native-sharesdk/android/src/main/assets/ShareSDK.xml

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

1. specify your qq appid and appkey in 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>
    )
}