react-native-sharesdk
share sdk for react-native
install
npm i react-native-sharesdk --save
link
react-native link react-native-sharesdk
IOS
qq 微信登录
-
打开Xcode app项目文件夹, 找到路径为
node_modules/react-native-sharesdk/ios/rnsharesdk/ShareSDK
的目录 并且拖动到Libraries
目录,不要勾选'copy items if needed'。 -
在项目中找到"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
- specify your qq AppId in
node_modules/react-native-sharesdk/android/build.gradle
defaultConfig { ... manifestPlaceholders = [ QQ_APP_ID: "100371282", //qq AppId ] }
- specify your sharesdk appkey in
node_modules/react-native-sharesdk/android/src/main/assets/ShareSDK.xml
<!-- 修改成你在sharesdk后台注册的应用的appkey"-->
- specify your qq appid and appkey in
node_modules/react-native-sharesdk/android/src/main/assets/ShareSDK.xml
<!-- ShareByAppClient标识是否使用微博客户端分享,默认是false -->
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>
)
}