react-native-social-kit v0.0.9

react-native-social-kit

此项目志在提供对第三方社交SDK的功能封装，方便开发者在React Native应用中使用诸如授权、分享等功能。

目前仅支持授权功能,仅覆盖微信、新浪微博、QQ。

项目仍在开发中，功能不稳定，请耐心等待。

Demo

安装

npm install --save react-native-social-kit@latest

配置

iOS

需要使用Cocoapods来管理依赖。（诸如微信、QQ等第三方的官方SDK包含了大量依赖文件和Xcode配置，使用Cocoapods可以极大简化这些流程）

在Podfile里添加

target 'Demo' do

pod "react-native-social-kit", :path => '../node_modules/react-native-social-kit'

end

然后执行命令pod install。（是不是很简单！）

修改AppDelegate.m文件如下：

	#import "WeixinModule.h"
	#import "WeiboModule.h"
	#import "QQModule.h"
	#import "AliModule.h"
	...
  
	- (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url
	{
 		 return [WeixinModule handleOpenURL:url] || [WeiboModule handleOpenURL:url] || [QQModule handleOpenURL:url] || [AliModule handleUrl:url];
	}

	- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
	{
  		return [WeixinModule handleOpenURL:url] || [WeiboModule handleOpenURL:url] || [QQModule handleOpenURL:url] || [AliModule handleUrl:url];
	}

此外，为了适配iOS9.0中的App Transport Security(ATS)对http的限制，需要在info.plist中修改配置

<key>NSAppTransportSecurity</key>
    <dict>    
        <key>NSAllowsArbitraryLoads</key><true/>
    </dict>

或者针对指定域名开放权限，以支付宝为例：

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSExceptionDomains</key>
        <dict>
            <key>alipay.com</key>
            <dict>
                <key>NSIncludesSubdomains</key>
                <true/>
                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                <true/>
                <key>NSTemporaryExceptionMinimumTLSVersion</key>
                <string>TLSv1.0</string>
                <key>NSTemporaryExceptionRequiresForwardSecrecy</key>
                <false/>
            </dict>
            <key>alipayobjects.com</key>
            <dict>
                <key>NSIncludesSubdomains</key>
                <true/>
                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                <true/>
                <key>NSTemporaryExceptionMinimumTLSVersion</key>
                <string>TLSv1.0</string>
                <key>NSTemporaryExceptionRequiresForwardSecrecy</key>
                <false/>
            </dict>
        </dict>
    </dict>

微信

在Xcode中选中TARGETS，在info标签栏的URL Types项目下添加子项，子项的URL Schemes为你所注册的应用程序的AppId。

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>wechat</string>
	<string>weixin</string>
</array>

微博

在Xcode中选中TARGETS，在info标签栏的URL Types项目下添加子项，子项的URL Schemes为“wb” ＋ 你所注册的应用程序的App Key，如“wb204543436852”。

在你的app的plist中添加如下键值对：

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>sinaweibohd</string>
    <string>sinaweibo</string>
    <string>weibosdk</string>
    <string>weibosdk2.5</string>
</array>

QQ

在Xcode中选中TARGETS，在info标签栏的URL Types项目下添加子项，子项的URL Schemes为“tencent” ＋ 你所注册的应用程序的App Key，如“tencent222222”。

在你的app的plist中添加如下键值对：

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>mqzone</string>
	<string>wtloginmqq2</string>
	<string>mqqopensdkapiV3</string>
	<string>mqqwpa</string>
	<string>mqqopensdkapiV2</string>
	<string>mqqOpensdkSSoLogin</string>
	<string>mqq</string>
</array>

支付宝

在Xcode中选中TARGETS，在info标签栏的URL Types项目下添加子项，子项的URL Schemes为你实际app的scheme名称。

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>alipay</string>
    <string>alipayshare</string>
</array>

Android

请依次修改以下文件：

// file: settings.gradle
...
include ':react-native-social-kit'
project(':react-native-social-kit').projectDir = new File(settingsDir, '../node_modules/react-native-social-kit/android')

// file: app/build.gradle
...
dependencies {
    ...
    compile project(':react-native-social-kit')
}

// file: MainActivity.java
...
import com.yoai.reactnative.socialsdk.SocialPackage;
...
public class MainActivity extends ReactActivity {
	...
	
    /**
     * A list of packages used by the app. If the app uses additional views
     * or modules besides the default ones, add more packages here.
     */
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new SocialPackage() // Add our package
        );
    }
}

如果需要代码混淆，为了保证第三方SDK的正常使用，需要在proguard配置中加上：

-keep class com.tencent.mm.sdk.** {
   *;
}

微信

在你的包名相应目录下新建一个wxapi目录，并在该wxapi目录下新增一个WXEntryActivity类，该类继承自com.yoai.reactnative.social.weixin.WXEntryActivity。

在AndroidManifest.xml里添加：

<activity
  android:name=".wxapi.WXEntryActivity"
  android:exported="true"
  android:label="@string/app_name"
  android:theme="@android:style/Theme.Translucent.NoTitleBar"
  />

微博

不需要额外配置

QQ

在AndroidManifest.xml里添加：

<activity
  android:name="com.tencent.tauth.AuthActivity"
  android:launchMode="singleTask"
  android:noHistory="true">
  <intent-filter>
    <action android:name="android.intent.action.VIEW"/>
    <category android:name="android.intent.category.DEFAULT"/>
    <category android:name="android.intent.category.BROWSABLE"/>

    <data android:scheme="tencent222222"/>
  </intent-filter>
</activity>

注意其中的“tencent222222”格式为“tencent”＋你所注册的应用程序的App Key，记得替换。

使用

In your JavaScript code:

import SocialKit from 'react-native-social-kit';
const {Weibo, Weixin, QQ, Ali} = SocialKit;

or simply

import {Weibo, Weixin, QQ, Ali} from 'react-native-social-kit';

Then, use it like:

Weibo.authorize({
  appId: '3928876547',
  redirectUrl: 'https://api.weibo.com/oauth2/default.html'
}, (data) => {
  if (data.error) {
    //发生了错误
  } else if (data.cancel) {
    //用户取消了授权
  } else {
    console.log(JSON.stringify(data));
  }
});

注册App

SDKNAME.authorize(config, (data) => {

})

SDKNAME表示Weixin、Weibo、QQ ,Ali 下同

使用授权登陆等功能之前首先需要注册App,在js端写入如下代码 以QQ为例

  componentWillMount() {
    // 注册App
    QQ.registerApp({
      appId: "222222"
    }, (data) => {
    });
  }

参数配置

授权登陆API

SDKNAME.registerApp(config, (data) => {

})

​

config

"OK"表示有此参数，"NA"表示没有此参数，"Not Yet"表示有此参数但是待实现。

data

通用授权结果

微信授权结果

微博授权结果

QQ授权结果

分享API

SDKNAME.share'MessageType'(config, (data) => {

})

MessageType 不同模块能分享的内容不同 见下表:

具体参数配置见Demo

支付API

SDKNAME.pay(config, (data) => {

},

(data) => {

}

)

config参数配置

关于我们

成员

• ldn0x7dc
• yuanyuli

组织

• yoaicom