Morioh
Login
Henry Short

Henry Short

3 years ago

React Native bridging library that integrates QQ SDKs

react-native-qq-lib

React Native bridging library that integrates QQ SDKs. QQ login and sharing, the react-native version requires 0.40.0 and above

Preface

First of all, I declare to you that this library is rewritten on the basis of react-native-qq .

It is maintained for its own use. Considering its own use and the needs of other developers, I finally decided to open a new warehouse for new projects.

Finally, thanks to lvbingru , tdzl2003 and all developers for their contributions to react-native-qq.

Integrated QQ SDK package version

Android SDK version: v3.3.9 (2020-04-27)

IOS SDK version: v3.3.9 (2020-04-27)

how to install

First install the npm package

yarn add git+https://github.com/haxibiao/react-native-qq-lib.git

or

npm install -D git+https://github.com/haxibiao/react-native-qq-lib.git

Then execute

cd ios && pod install && cd ..

Install iOS project

Add qq whitelist to the project plist file: (Required for ios9 or above) Please open Info.plist in text mode and add it

<key>LSApplicationQueriesSchemes</key>
<array>
    <!-- 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>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>mqzoneopensdk</string>
 </array>

The Info->URL Typesincrease in the QQ scheme: Identifierset qq, URL Schemesset your registered developer account QQ in APPID, need to add a prefix tencent, such astencent1104903684

AppDelegate.mAdd the following code to your project file:

#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];
}

Install Android project

In android/app/build.gradle, add the following code under the defaultConfig column:

manifestPlaceholders = [
    QQ_APPID: "<平台申请的APPID>"
]

If you need to modify the APPID in the future, you only need to modify this one.

Also, make sure your MainActivity.java have onActivityResultachieved:

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data){
        super.onActivityResult(requestCode, resultCode, data);
        mReactInstanceManager.onActivityResult(requestCode, resultCode, data);
    }

how to use

Import package

import * as QQAPI from 'react-native-qq-lib';

API

QQAPI.login([scopes])
  • scopes: The permissions requested for login, the default is get_simple_userinfo. When multiple permissions are required, separate them with a comma.

Calling QQ login, you may jump to the QQ application or open a web browser for the user to log in. Before this login returns, all subsequent login calls will fail directly.

Return an Promiseobject. The callback on success is an object like this:

{
	"access_token": "CAF0085A2AB8FDE7903C97F4792ECBC3",
	"openid": "0E00BA738F6BB55731A5BBC59746E88D"
	"expires_in": "1458208143094.6"
	"oauth_consumer_key": "12345"
}
QQAPI.shareToQQ(data)

Share to QQ friends, the parameters are the same as QQAPI.shareToQzone, return an Promiseobject

QQAPI.shareToQzone(data)

Share to QZone, the parameter is an object, which can have the following forms:

// Share graphic message 
{ 
	type : 'news' , 
	title : share title , 
	description : description , 
	webpageUrl : webpage address , 
	imageUrl : remote image address , 
}

// share text message 
{ 
	type : 'text' , 
	text : share content , 
}

// Share the picture 
// By: The imageUrl and imageLocalUrl here must be passed and kept consistent (don’t ask me why I buried this pit, I asked Tencent’s SDK to do this) 
// Supported paths such as: file:// content :// /data/user/0/com.xxxxx/cache/ 
{ 
    type : 'image' , 
    imageUrl : image path , 
    imageLocalUrl : image path , 
}

// The remaining formats have not yet been implemented.

The image path does not support http and https network addresses (for the network address, download the image yourself first, the rn-fetch-blob library is recommended here ).

import RNFetchBlob from 'rn-fetch-blob';

const _image = 图片地址或路径;

if (RegExp(/http:\/\//).exec(_image) || RegExp(/https:\/\//).exec(_image)) {
  // 判断是网络地址的话先下载图片，然后再分享图片

  RNFetchBlob.config({
    fileCache: true,
    appendExt: "png",
  })
    .fetch("GET", _image)
    .then((res) => {
      const qq = QQAPI.shareToQzone({
        type: "image",
        imageUrl: res.path(),
        imageLocalUrl: res.path(),
      });
      qq.then(() => {
        __onSucceed();
      }).catch(() => {
      });
    })
    .catch((error) => {
    });
} else {
  const qq = QQAPI.shareToQzone({
    type: "image",
    imageUrl: _image,
    imageLocalUrl: _image,
  });
  qq.then(() => {
  }).catch(() => {
  });
}

common problem

Android: No response when calling QQAPI.login()

Usually this reason is because the Manifest is not configured properly. Check the configuration of the Activity in the Manifest.

Android: QQ login has been successfully activated, but the callback is not executed

Usually this reason is because of the lack of onActivityResult call in MainActivity.java.

Download Details:

Author: haxibiao

Source Code: https://github.com/haxibiao/react-native-qq-lib

#react-native #react #mobile-apps

React Native bridging library that integrates QQ SDKs
2.40 GEEK