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
npm install --save react-native-qqsdk@latest
react-native link react-native-qqsdk
- Install package from npm
npm install --save react-native-qqsdk@latest
- Create a Podfile
- Add pod in Podfile something similar to this:
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'CxxBridge',
'RCTText',
'RCTNetwork',
'RCTImage',
'RCTWebSocket', # needed for debugging
# Add any other subspecs you want to use in your project
'DevSupport'
]
pod "Yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
pod "react-native-qqsdk", :path => "../node_modules/react-native-qqsdk"
- Pod install
- Follow step 7,8,9 in iOS Setup
npm install --save react-native-qqsdk@latest
-
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];
}
-
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
$RNProjectRoot/package.json
{
"qq_app_id": "YOUR_QQ_APP_ID"
}
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()
);
}
};
}
- 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 | √ | √ | √ | √ | √ | √ |
code | explanation |
---|---|
404 | QQ client not found |
405 | Android Activity not found |
500 | QQ share (QQZone, QQ, Favorite) error |
503 | QQ share (QQZone, QQ, Favorite) cancelled |
600 | QQ ssoLogin error |
603 | ssoLogin cancelled |
This plugin support three Image types:
- Network URL
- Base64
- Absolute file path also support resolveAssetSource,for example, resolveAssetSource(require('./news.jpg')).uri
import * as QQ from 'react-native-qqsdk';
QQ.isQQClientInstalled()
.then(()=>{console.log('Installed')})
.catch(()=>{console.log('not installed')});
import * as QQ from 'react-native-qqsdk';
QQ.ssoLogin()
.then((result)=>{console.log('result is', result)})
.catch((error)=>{console.log('error is', error)});
import * as QQ from 'react-native-qqsdk';
QQ.logout()
.then((result)=>{console.log('result is', result)})
.catch((error)=>{console.log('error is', error)});
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)});
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)});
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)});
import * as QQ from 'react-native-qqsdk';
const audioPreviewUrl = 'https://y.qq.com/portal/song/001OyHbk2MSIi4.html';
const audioUrl = 'https://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)});
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.2.1 version sdk for Android,3.2.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.