此库基于react-native-qq,在此感谢这个库的开发者们的贡献。
React Native的QQ登录插件, react-native版本需要0.40.0及以上
SDK版本:
Android:3.5.13.83
iOS:3.5.17.4
yarn add react-native-mqq
或
npm install react-native-mqq --save
然后执行
react-native link react-native-mqq
在工程plist文件中加入qq白名单:(ios9以上必须)
请以文本方式打开Info.plist,在其中添加
<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>
在Info->URL Types
中增加QQ的scheme: Identifier
设置为qq
, URL Schemes
设置为你注册的QQ开发者账号中的APPID,需要加前缀tencent
,例如tencent1104903684
在你工程的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/app/build.gradle
里,defaultConfig栏目下添加如下代码:
manifestPlaceholders = [
QQ_APPID: "<平台申请的APPID>"
]
以后如果需要修改APPID,只需要修改此一处。
另外,确保你的MainActivity.java中有onActivityResult
的实现:
@Override
public void onActivityResult(int requestCode, int resultCode, Intent data){
super.onActivityResult(requestCode, resultCode, data);
mReactInstanceManager.onActivityResult(requestCode, resultCode, data);
}
import * as QQAPI from 'react-native-mqq';
// 初始化,调用其他api时请先调用该api,隐私合规后可调用此API进行初始化操作
QQAPI.init();
// 调用QQ登录,可能会跳转到QQ应用或者打开一个网页浏览器以供用户登录。在本次login返回前,所有接下来的login调用都会直接失败。
// - scopes: 登录所申请的权限,默认为get_simple_userinfo。 需要多个权限时,以逗号分隔。
// 返回一个`Promise`对象。成功时的回调为一个类似这样的对象:
QQAPI.login([scopes]);
{
"access_token": "CAF0085A2AB8FDE7903C97F4792ECBC3",
"openid": "0E00BA738F6BB55731A5BBC59746E88D",
"expires_in": "1458208143094.6",
"oauth_consumer_key": "12345"
}
// 分享到QQ好友,参数同QQAPI.shareToQzone,返回一个`Promise`对象
QQAPI.shareToQQ(data);
// 分享到QZone,参数为一个object,可以有如下的形式:
QQAPI.shareToQzone(data)
// 分享图文消息
{
type: 'news',
title: '分享标题',
description: '描述',
webpageUrl: '网页地址',
imageUrl: '远程图片地址',
}
通常出现这个原因是因为Manifest没有配置好,检查Manifest中有关Activity的配置。
通常出现这个原因是因为MainActivity.java中缺少onActivityResult的调用。