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

2017-11-01 16:14:36 +08:00
 jpush

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

在集成插件之前,需要在各大开放平台上成功注册应用,并通过审核(支持 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 接口

作者:KenChoi - 极光( JPush 为极光推送团队账号,欢迎关注)

原文:React Native 轻松集成分享功能( Android 篇)

知乎专栏:极光日报

2518 次点击
所在节点    推广
0 条回复

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/402659

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX