微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

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

第一步:安装

npm install jshare-react-native --save
npm install jcore-react-native --save
react-native link

第二步:配置

如果 link 失败,则需要进行手动配置 settings.gradlebuild.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:

@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,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,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 篇)

知乎专栏:极光日报

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如果组件之中有复用的代码,需要重新创建一个父类,父类中存储公共代码,返回子类,同时把公用属性...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例如我们的 setState 函数式同步执行的,我们的事件处理直接绑定在了 dom 元素上,这些都跟 re...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom 转为真实 dom 进行挂载。其实函数是组件和类组件也是在这个基础上包裹了一层,一个是调...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使用,可能是不了解。我公司的项目就没有使用,但是在很多三方库中都有使用。本小节我们来学习下如果使用该...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接触 react 就一直使用 mobx 库,上手简单不复杂。
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc 端可以使用分页进行渲染数限制,在移动端可以使用下拉加载更多。但是对于大量的列表渲染,特别像有实时数据...
本小节开始前,我们先答复下一个同学的问题。上一小节发布后,有小伙伴后台来信问到:‘小编你只讲了类组件中怎么使用 ref,那在函数式组件中怎么使用呢?’。确实我们...
上一小节我们了解了固定高度的滚动列表实现,因为是固定高度所以容器总高度和每个元素的 size、offset 很容易得到,这种场景也适合我们常见的大部分场景,例如...
上一小节我们处理了 setState 的批量更新机制,但是我们有两个遗漏点,一个是源码中的 setState 可以传入函数,同时 setState 可以传入第二...
我们知道 react 进行页面渲染或者刷新的时候,会从根节点到子节点全部执行一遍,即使子组件中没有状态的改变,也会执行。这就造成了性能不必要的浪费。之前我们了解...