React Native 轻松集成分享功能(Android 篇)
关于推送的集成请参考这篇文章,关于统计的集成请参考这篇文章,本篇文章将引导你集成分享功能。
在集成插件之前,需要在各大开放平台上成功注册应用,并通过审核(支持 3 个可选的主流平台)。支持的平台如下:
- 微信开放平台
- QQ 开放平台
- 微博开放平台
第一步:安装
npm install jshare-react-native --save
npm install jcore-react-native --save
react-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", //在此替换你的APPKeyJPUSH_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 enableProguardInReleaseBuildsproguardFiles 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必须在包名路径下,否则回调不成功--><activityandroid: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--><SinaWeiboAppKey="374535501"AppSecret="baccd12c166f1df96736b51ffbf600a2"RedirectUrl="https://www.jiguang.cn"/><QQAppId="1106011004"AppKey="YIbPvONmBQBZUGaN"/><WechatAppId="wxc40e16f3ba6ebabc"AppSecret="dcad950cd0633a27e353477c4ec12e7a"/>
</DevInfor>
做完了以上步骤,sync 一下项目,如果成功了,接下来就可以开始使用了。
2.6 加入 JSharePackage
your app/src/../MainApplication.java
@Overrideprotected List<ReactPackage> getPackages() {return Arrays.<ReactPackage>asList(new MainReactPackage(),new JSharePackage(SHUTDOWN_TOAST, SHUTDOWN_LOG));
}
初始化:还是在 MainAppliation 中加入一下代码初始化 JShareInterface:
@Override
public 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 篇)
知乎专栏:极光日报
转载于:https://www.cnblogs.com/jpush88/p/7767080.html
React Native 轻松集成分享功能(Android 篇)相关推荐
- React Native 轻松集成分享功能( iOS 篇)
产品一直催我在 RN 项目中添加分享功能,一直没找到合适的库,今天让我看到了一个插件分享给大家. 在集成插件之前,需要在各大开放平台上成功注册应用,并通过审核(支持 3 个可选的主流平台).支持的平台 ...
- android+统计功能,React Native 轻松集成统计功能(Android 篇)
搜索热词 关于推送的集成请参考这篇文章,本篇文章将引导你集成统计功能,只需要简单的三个步骤就可以集成统计功能. 第一步 安装 在你的项目路径下执行命令: npm install janalytics- ...
- React Native 轻松集成统计功能(iOS 篇)
最近产品让我加上数据统计功能,刚好极光官方支持数据统计 支持了React Native 版本 第一步 安装: 在你的项目路径下执行命令: npm install janalytics-react-na ...
- Android轻松实现分享功能
在Android开发中,要实现分享功能,可能首先想到第三方的ShareSDK,其实,想要分享一些图片,文本之类的完全没必要在App中集成第三方SDK,利用原生的SDK就可以轻松实现分享功能. Acti ...
- React Native填坑之旅--动画篇
React Native填坑之旅--Button篇 React Native填坑之旅--动画 React Native填坑之旅--HTTP请求篇 动画是提高用户体验不可缺少的一个元素.恰如其分的动画可 ...
- android中设置lmargin简书,超详细React Native实现微信好友/朋友圈分享功能-Android/iOS双平台通用...
(一)前言 本文主要会涉及到以下内容: 微信开发者应用申请审核 安装配置微信分享库 微信好友/朋友圈功能实现 (二)应用申请审核 首先大家需要去微信开发平台去注册账号并且创建一个移动应用.(地址:ht ...
- 【React Native】集成声网Agora语音通讯
前言: 公司的产品是一款基于社交的内容聊天软件,需要集成语音通讯功能,在写iOS原生项目时,用到的就是Agora SDK,现在写React Native也直接采用了Agora的库. 集成iOS.And ...
- android开发微信分享功能,Android编程实现微信分享信息的方法
本文实例讲述了Android编程实现微信分享信息的方法.分享给大家供大家参考,具体如下: 随着微信越来越火,越来越多的应用要求有分享到微信的功能.虽然有很多平台都帮集成有分享功能,比如友盟.但是个人觉 ...
- React Native的安装和初始化(android /ios)
2019独角兽企业重金招聘Python工程师标准>>> 好久没有写东西,最近想学一下React Native,借此写一写笔记 React Native 的安装 使用React Nat ...
最新文章
- Arduino教程资料汇总(8月22日悄悄跟新了一下)
- Update of SharePoint Me
- hystrix熔断和降级的区别_Ribbon+Hystrix断路器实现微服务的降级和熔断
- Appium环境搭建python篇(mac系统)
- what happened after a template is selected in Create with template button
- JoinPoint的用法
- Python数模笔记-StatsModels 统计回归(1)简介
- rocketMq双master集群模式下故障演练
- Linux中使用Apache发布html网页
- Intel 45 纳米处理器加速VMware虚拟架构普及
- PSP联机插件pro online
- 什么是量子加密(二)
- ADS系列 - 混频器设计 - 混频器原理介绍及仿真1
- 吉他入门教程——记忆音阶的两种方法
- hdu4370 最短路
- 素描嘴巴注意这几个点,轻松画出头像神韵~
- 计算机编程里面counter是什么意思,step在计算机编程中的意思是什么
- STC89C52 使用 LCD 1602
- hadoop distcp 参数调优_linux性能调优总结 - 星火撩原
- P2746 P2812 [USACO5.3]校园网Network of Schools[SCC缩点]