React Native 轻松集成分享功能（Android 篇）

关于推送的集成请参考这篇文章，关于统计的集成请参考这篇文章，本篇文章将引导你集成分享功能。

在集成插件之前，需要在各大开放平台上成功注册应用，并通过审核（支持 3 个可选的主流平台）。支持的平台如下：

• 微信开放平台
• QQ 开放平台
• 微博开放平台

第一步：安装

npm install jshare-react-native --savenpm install jcore-react-native --savereact-native link

第二步：配置

如果 link 失败，则需要进行手动配置 settings.gradle 和 build.gradle 部分

2.1 配置 settings.gradle

your project/settings.gradle

include ':app', ':jshare-react-native', ':jcore-react-native'project(':jshare-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jshare-react-native/android')project(':jcore-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jcore-react-native/android')

2.2 配置 build.gradle

your project/app/build.gradle

android {  ...  defaultConfig {    applicationId "your application id"    ...    manifestPlaceholders = [      JSHARE_PKGNAME: "cn.jiguang.share.demo",      JPUSH_APPKEY: "your app key", //在此替换你的APPKey      JPUSH_CHANNEL: "developer-default",       //应用渠道号, 默认即可      TENCENT_APPID: "your tencent app id"    ]  }  ...  signingConfigs {        debug {            storeFile file("jshare.jks") //你的签名文件路径            storePassword "sdkteam" //你的文件保存密码            keyAlias "jshare"  //你的别名            keyPassword "sdkteam" //你的签名密码        }        release {            storeFile file("jshare.jks")  //你的签名文件路径            storePassword "sdkteam" //你的文件保存密码            keyAlias "jshare" //你的别名            keyPassword "sdkteam" //你的签名密码        }    }     buildTypes {        release {            minifyEnabled enableProguardInReleaseBuilds            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"            signingConfig signingConfigs.debug        }        debug {            signingConfig signingConfigs.debug        }    }    ...    dependencies {      compile project(':jshare-react-native')      compile project(':jcore-react-native')    }}

2.3 配置 AndroidManifest.xml

your app/AndroidManifest.xml

...<application>         ...        <!-- Required. For publish channel feature -->        <!-- JPUSH_CHANNEL 是为了方便开发者统计APK分发渠道。-->        <!-- 例如: -->        <!-- 发到 Google Play 的APK可以设置为 google-play; -->        <!-- 发到其他市场的 APK 可以设置为 xxx-market。 -->        <!-- 目前这个渠道统计功能的报表还未开放。-->        <meta-data android:name="JPUSH_CHANNEL" android:value="${JPUSH_CHANNEL}"/>        <meta-data android:name="JPUSH_APPKEY" android:value="${JPUSH_APPKEY}"/>        <meta-data android:name="JSHARE_PKGNAME" android:value="${applicationId}" />        <meta-data android:name="TENCENT_APPID" android:value="${TENCENT_APPID}" />        <!-- Optional 微信分享回调,wxapi必须在包名路径下，否则回调不成功-->        <activity            android:name=".wxapi.WXEntryActivity"            android:theme="@android:style/Theme.NoTitleBar"            android:exported="true" /></application>

2.4 添加 WXEntryActivity

需要在你的 app 下新建一个 wxapi 的包名，然后创建 WXEntryActivity。

your app/src/…/wxapi/WXEntryActivity.java

package yourPackageName.wxapi;import cn.jiguang.share.wechat.WeChatHandleActivity;public class WXEntryActivity extends WeChatHandleActivity {}

2.5 添加 JGShareSDK.xml

在你的 assets 目录下添加 JGShareSDK.xml，并且将新浪微博，QQ，微信的 AppId 和 AppSecret 替换成自己的。

<?xml version="1.0" encoding="utf-8"?><DevInfor>    <!-- 如果不需要支持某平台，可缺省该平台的配置-->    <!-- 各个平台的KEY仅供DEMO演示，开发者要集成发布需要改成自己的KEY-->    <SinaWeibo        AppKey="374535501"        AppSecret="baccd12c166f1df96736b51ffbf600a2"        RedirectUrl="https://www.jiguang.cn"/>    <QQ        AppId="1106011004"        AppKey="YIbPvONmBQBZUGaN"/>    <Wechat        AppId="wxc40e16f3ba6ebabc"        AppSecret="dcad950cd0633a27e353477c4ec12e7a"/></DevInfor>

做完了以上步骤，sync 一下项目，如果成功了，接下来就可以开始使用了。

2.6 加入 JSharePackage

your app/src/../MainApplication.java

 @Override protected List<ReactPackage> getPackages() {    return Arrays.<ReactPackage>asList(      new MainReactPackage(),      new JSharePackage(SHUTDOWN_TOAST, SHUTDOWN_LOG)    );}

初始化：还是在 MainAppliation 中加入一下代码初始化 JShareInterface：

@Overridepublic void onCreate() {  super.onCreate();  SoLoader.init(this, false);  // 在 Init 之前调用，设置为 true，则会打印 debug 级别日志，否则只会打印 warning 级别以上的日志  // JShareInterface.setDebugMode(true);  JShareInterface.init(this);}

第三步：使用

接下来就可以在 JS 中引入 JShareModule 调用它的接口：

your component.js

...import JShareModule from 'jshare-react-native';

Android 接口

• getPlatformList(cb)

  /*** 获取SDK所有能用的平台名称，如要使用某个平台，必须在JGShareSDK.xml中配置。* Android only* @param {Function} callback 返回值 list 是一个数组*/

  usage:

  JShareModule.getPlatformList((list) => {console.log(list);});

• share(message, successCallback, failCallback)

  /*** 分享* @param {object} message = {* * platformString 必填，用于分享置不同的平台 //可以是 'wechat_session' / 'wechat_timeLine' / 'wechat_favourite' / 'qq' / 'qzone' / 'sina_weibo' / 'sina_weibo_contact' * type 必填* * {*  type: 'text'*  platform: platformString  // 分享到指定平台*  text: String*  imagePath: // 选填，新浪微博本地图片地址，其他平台没有这个字段(iOS 不支持这个字段)* }* * {*  type: 'image'*  platform: platformString  // 分享到指定平台*  imagePath: String   // 本地图片路径 imagePath, imageUrl imageArray 必须三选一*  text: String  // 选填*  imageUrl: String // 网络图片地址，必须以 http 或 https 开头，imagePath, imageUrl imageArray 必须三选一 (iOS 不支持这个字段)*  imageArray: [String]  // (选填: 分享到 Qzone 才提供这个字段) 如果需要分享多张图片需要这个参数，数组中问题图片路径 imagePath, imageUrl imageArray 必须三选一* }* * {*  type: 'video'*  platform: platformString  // 分享到指定平台*  title: String // 选填*  url: String // 视频跳转页面 url*  text: String  // 选填*  imagePath: String // 选填，缩略图，本地图片路径*  *  videoUrl: String  // QQ 空间本地视频 (iOS 不支持这个字段)* }* * {*  type: 'audio'*  platform: platformString  // 分享到指定平台*  musicUrl: String //必填 点击直接播放的 url*  url: String //选填，点击跳转的 url*  imagePath: String   //选填，缩略图，本地图片路径，imagePath，imageUrl 必须二选一*  imageUrl: String // 选填，网络图片路径，imagePath， imageUrl 必须二选一*  title: String // 选填 *  text: String  // 选填* }* * {*  type: 'file'*  platform: platformString  // 分享到指定平台*  path: String // 必填，文件路径*  fileExt: String // 必填，文件类型后缀*  tile: String* }* * {* type: 'emoticon'* platform: platformString  // 分享到指定平台* imagePath: String // 必填，本地图片路径* }* * {* type: 'app' // wechat_favourite 不支持* platform: platformString  // 分享到指定平台* url: String // 点击跳转 url* extInfo: String // 选填 第三方应用自定义数据* path: String // 选填 对应 app 数据文件* title: String // 选填* text: String // 选填* }* * {* type: 'link'* platform: platformString  // 分享到指定平台* url: String // 必填，网页 url* imagePath: String // 选填，本地图片路径 imagePath，imageUrl 必须二选一 * imageUrl: String // 选填，网络图片地址 imagePath imageUrl 必须二选一 (iOS 不支持)* title: String // 选填* text: String // 选填* }* * {* type: 'undefined'* platform: platformString  // 分享到指定平台* }* * @param {Function} success = function (state) {} ## * state = {state: String} state = 'success' / 'fail' / 'cancel' / 'unknow' ** @param {Function} fail = function (error) {} ## * error = {code: number, descript: String}*/

  usage:

  var message = {    platform: "wechat_session",    type: "image",    text: "JShare test text",    imagePath: "/storage/emulated/0/DCIM/Camera/xx.jpg"  };JShareModule.share(message, (map) => {console.log("share succeed, map: " + map);}, (map) => {console.log("share failed, map: " + map);})

• getSocialUserInfo(param, successCallback, failCallback)

  /*** 获取社交平台用户信息* @param {Object} param = {*  platform: String //可以是 'wechat_session' / 'wechat_timeLine' / 'wechat_favourite' / 'qq' / 'qzone' / 'sina_weibo' / 'sina_weibo_contact' * }* @param {Function} success function (userInfo) {} * userInfo = {*  name: String        *  iconUrl: String   // 社交平台头像链接*  gender: String    // 'female' /  'male'*  response: Object  // 社交平台上的原始数据* }** @param {Function} fail = function (error) {} ## * error = {code: number, descript: String}*/

  usage:

  var param = {platform: "wechat_session"};JShareModule.getSocialUserInfo(param, (map) => {console.log(map);}, (errorCode) => {console.log("errorCode: " + errorCode);});

• isPlatformAuth(param, callback)

  /*** 判断某平台是否支持授权* * @param {Object} param = {*  platform: String //可以是 'wechat_session' / 'wechat_timeLine' / 'wechat_favourite' / 'qq' / 'qzone' / 'sina_weibo' / 'sina_weibo_contact' * }* @param {Function} callback = (Boolean) => {} */

  usage:

  var param = {platform: "wechat_session"};JShareModule.isPlatformAuth(param, (result) => {console.log(param.platform + "is Auth: " + result);});

• isClientValid(param, callback)

  /*** 判断该平台的分享是否有效* Android only* @param {Object} param = {*  platform: String //可以是 'wechat_session' / 'wechat_timeLine' / 'wechat_favourite' / 'qq' / 'qzone' / 'sina_weibo' / 'sina_weibo_contact' * }* @param {Function} callback = (Boolean) => {} */

  usage:

  var param = {platform: "wechat_session"};JShareModule.isClientValid(param, (result) => {console.log(param.platform + "is valid: " + result);});

• authorize(param, successCallback, failCallback)

  /*** 授权接口* @param {Object} param = {*  platform: String //可以是 'wechat_session' / 'wechat_timeLine' / 'wechat_favourite' / 'qq' / 'qzone' / 'sina_weibo' / 'sina_weibo_contact' * }* @param {Function} success * @param {Function} fail */

  usage:

  var param = {platform: "wechat_session"};JShareModule.authorize(param, (map) => {console.log("Authorize succeed " + map);}, (errorCode) => {console.log("Authorize failed, errorCode : " + errorCode);});

• isAuthorize(param, callback)

  /***  判断是否授权接口* @param {Object} param = {*  platform: String //可以是 'wechat_session' / 'wechat_timeLine' / 'wechat_favourite' /    'qq' / 'qzone' / 'sina_weibo' / 'sina_weibo_contact' * }  * @param {Function} callback = (Boolean) => {} */

  usage:

  var param = {  platform: "wechat_session"};JShareModule.isAuthorize(param, (result) => {              console.log("param is Authorize: " + result);});

• cancelAuthWithPlatform(param, callback)

  /*** 删除用户授权本地数据* * @param {Object} param = {*  platform: String //可以是 'wechat_session' / *                           'wechat_timeLine' / *                           'wechat_favourite' / *                           'qq' / *                           'qzone' /*                           'sina_weibo' /*                           'sina_weibo_contact' * }* @param {Function} callback = (Int) => {}* @code 返回码，0 表示成功删除*/

  usage:

  var param = {platform: "wechat_session"};JShareModule.cancelAuthWithPlatform(param, (code) => {if (code === 0) {  console.log("remove authorize succeed");} else {  console.log("remove authorize failed, errorCode: " + code);}});

---

作者：KenChoi - 极光推送

原文：React Native 轻松集成分享功能（Android 篇）

知乎专栏：极光日报