A React Native wrapper around the Tencent QQ SDK for Android and iOS. Provides access to QQ ssoLogin, QQ Sharing, QQ Zone Sharing etc.
- QQ SSO Login
- QQ Logout
- QQ Share
- QZone Share
- QQ Favorites
- checkClientInstalled
##Installation
npm install --save react-native-qqsdk@latest
###RNPM
react-native link react-native-qqsdk
###Manual
npm install --save react-native-qqsdk@latest
####iOS Setup
-
Open your app's Xcode project
-
Find the
RCTQQSDK.xcodeproj
file within thenode_modules/react-native-qqsdk/ios
directory and drag it into theLibraries
node in Xcode -
Select the project node in Xcode and select the "Build Phases" tab of your project configuration.
-
Drag
libRCTQQSDK.a
fromLibraries/RCTQQSDK.xcodeproj/Products
into the "Link Binary With Libraries" section of your project's "Build Phases" configuration. -
Click the plus sign underneath the "Link Binary With Libraries" list and add the
libz.tbd,libiconv.tdb,libstdc++.tbd,libsqlite3.tbd,Security.framework,SystemConfiguration.framework,CoreTelephony.framework,CoreGraphics.framework
library . -
Click the plus sign underneath the "Link Binary With Libraries" list and add the TencentOpenAPI.framework which locate in
../node_modules/react-native-qqsdk/ios/RCTQQSDK
. Then Under the "Build Settings" tab of your project configuration, find the "Framework Search Paths" section and edit the value. Add a new value,$(SRCROOT)/../node_modules/react-native-qqsdk/ios/RCTQQSDK
. -
Under the "Info" tab of your project configuration, find the "URL Types" section and add your app Id.
-
Under the "Info" tab of your project configuration, add LSApplicationQueriesSchemes For QQ SDK.
-
add following code to your AppDelegate.m
...
#import <React/RCTLinkingManager.h>
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
return [RCTLinkingManager application:application openURL:url
sourceApplication:sourceApplication annotation:annotation];
}
####Android Setup
-
In your
android/settings.gradle
file, make the following additions:include ':app', ':react-native-qqsdk' project(':react-native-qqsdk').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-qqsdk/android')
-
In your
android/app/build.gradle
file, add the:react-native-qqsdk
project as a compile-time dependency:... dependencies { ... compile project(':react-native-qqsdk') }
-
add App ID to
android/app/build.gradle
which locate in react-native-qqsdk node_modules folder...
manifestPlaceholders = [
QQ_APP_ID: ${QQ_APP_ID}, //在此替换你的APPKey
]
```
4.Update the MainApplication.java
file to use react-native-qqsdk via the following changes:
...
// 1. Import the plugin class.
import me.vanpan.rctqqsdk.QQSDKPackage;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
...
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new QQSDKPackage()
);
}
};
}
##Documentation
###Support API
- ssoLogin
- Logout
- checkClientInstalled
- Share(see form below)
Platform | iOS | iOS | iOS | Android | Android | Android |
---|---|---|---|---|---|---|
ShareScene | QQZone | QQ Favorite | QQZone | QQ Favorite | ||
Text | √ | √ | √ | ✕ | √ | √ |
Image | √ | √ | √ | √ | √ | √ |
News | √ | √ | √ | √ | √ | √ |
Audio | √ | √ | √ | √ | √ | √ |
###Error Code
code | explanation |
---|---|
404 | QQ client not found |
405 | Android Activity not found |
500 | QQ share (QQSDKPackage,QQZone QQ Favorite) error |
503 | QQ share (QQSDKPackage,QQZone QQ Favorite) cancelled |
600 | QQ ssoLogin error |
603 | ssoLogin cancelled |
###Image This plugin support three Image types:
- Network URL
- Base64
- Absolute file path also support resolveAssetSource,for example, resolveAssetSource(require('./news.jpg')).uri
###Usage #####checkClientInstalled
import * as QQ from "react-native-qqsdk";
QQ.isQQClientInstalled()
.then(()=>{console.log('Installed')})
.catch(()=>{console.log('not installed')});
#####ssoLogin
import * as QQ from "react-native-qqsdk";
QQ.ssoLogin()
.then((result)=>{'result is', result})
.catch((error)=>{console.log('error is', error)});
#####logout
import * as QQ from "react-native-qqsdk";
QQ.logout()
.then((result)=>{'result is', result})
.catch((error)=>{console.log('error is', error)});
#####shareText
import * as QQ from "react-native-qqsdk";
QQ.shareText("分享文字",QQ.shareScene.QQ)
.then((result)=>{console.log('result is', result)})
.catch((error)=>{console.log('error is', error)});
#####shareImage
import * as QQ from "react-native-qqsdk";
const imgUrl = "https://y.gtimg.cn/music/photo_new/T001R300x300M000003Nz2So3XXYek.jpg";
QQ.shareImage(imgUrl,'分享标题','分享描述',QQ.shareScene.QQ)
.then((result)=>{console.log('result is', result)})
.catch((error)=>{console.log('error is', error)});
#####shareNews
import * as QQ from "react-native-qqsdk";
import resolveAssetSource from 'resolveAssetSource';
QQ.shareNews('https://facebook.github.io/react-native/',resolveAssetSource(require('./news.jpg')).uri,'分享新闻标题','分享新闻描述',QQ.shareScene.QQ)
.then((result)=>{console.log('result is', result)})
.catch((error)=>{console.log('error is', error)});
#####shareAudio
import * as QQ from "react-native-qqsdk";
const audioPreviewUrl = "https://y.qq.com/portal/song/001OyHbk2MSIi4.html";
const audioUrl = "http://stream20.qqmusic.qq.com/30577158.mp3";
const imgUrl = "https://y.gtimg.cn/music/photo_new/T001R300x300M000003Nz2So3XXYek.jpg";
QQ.shareAudio(audioPreviewUrl,audioUrl,imgUrl,'十年','陈奕迅',QQ.shareScene.QQ)
.then((result)=>{console.log('result is', result)})
.catch((error)=>{console.log('error is', error)});
#####getUserInfo
var url = "https://graph.qq.com/user/get_user_info?access_token=" + accessToken + "&oauth_consumer_key= APPID &openid=" + userId;
http.get(url)
This plugin use 3.1.1 version sdk for Android,3.1.3 version sdk for iOS. You can download lastest version sdk here
Feel free to contribute
react-native-qqsdk is released under the MIT license. See LICENSE file for more information.