【React Native 实战:构建电商 App】18-集成极光

React Native 实战:构建电商 App

知识点:

  • 集成极光
  • 集成友盟

集成极光

极光设置

创建一个新的应用,名字可以随便。

enter image description here

配置“推送设置”信息,这里 Android 输入框中填写我们自己的包名,默认是 com.;项目名称,这里的项目名称就是使用 RN 命令创建的时候输入的名称;iOS 的设置只需要上传证书,这里就不展示了。

enter image description here

安装包

极光有一个官方维护的 npm 包,单击这里查看 Github 地址

在项目根目录执行 npm install jpush-react-native jcore-react-native –save 命令安装第三方包。

执行命令 react-native link 尝试自动 link 原生部分,这个过程需要输入一次 appkey,该值在刚才创建的应用设置中可看到。

enter image description here

这里稍微注意一下,微信的 link 之前是改动过的,如果使用这种方式的话会导致之前的配置被修改,需要再手动改回去。

也可以指定包名称去 link,比如 react-native link jpush-react-native。

iOS 手动配置

使用 Xcode 打开 iOS 项目,修改配置TARGETS-> BUILD Phases -> LinkBinary with Libraries,将 require 修改成 optional。

enter image description here

如果要使用 iOS 的推送,需要修改下面这个地方,将 off 修改为 on,此时需要登录 iOS 的开发者账户。

enter image description here

Android 手动配置

修改安装的配置文件 /android/app/build.gradle,一般情况下 Appkey 已经填好了,只需要引入推送的两个包就好了。

android {
    defaultConfig {
        applicationId "com.anxintao"
        ...
        manifestPlaceholders = [
                JPUSH_APPKEY: "yourAppKey", //在此替换你的APPKey
                APP_CHANNEL: "developer-default"    //应用渠道号
        ]
    }
}
...
dependencies {
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile project(':jpush-react-native')  // 添加 jpush 依赖
    compile project(':jcore-react-native')  // 添加 jcore 依赖
    compile "com.facebook.react:react-native:+"  // From node_modules
}

enter image description here

修改 /android/settings.gradle 配置文件,引入包的地址:

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

enter image description here

检查一下参数,默认情况下这个配置是好的,文件路径 /android/app/src/main/AndroidManifest.xml。

enter image description here

最后还要修改 Java 文件,将推送的包加入到 RN 组件中,文件路径 /android/app/src/main/java/com/anxintao/MainApplication.java,导入 Java 包并设置参数。

enter image description here

下面是一个调用推送的 demo。

import JPushModule from 'jpush-react-native';

...

// example
componentDidMount() {
    JPushModule.notifyJSDidLoad();
    JPushModule.addReceiveCustomMsgListener((message) => {
      this.setState({pushMsg: message});
    });
    JPushModule.addReceiveNotificationListener((message) => {
      console.log("receive notification: " + message);
    })
  }

  componentWillUnmount() {
    JPushModule.removeReceiveCustomMsgListener();
    JPushModule.removeReceiveNotificationListener();
  }

集成友盟

友盟的推送、统计、分享等功能真的非常实用,这里还是推荐集成一个的。

首先要在官网下载友盟的 SDK,这里 Android 和 iOS 是区别下载的,要根据自己的需求来下载具体的 SDK,下载地址请单击这里

enter image description here

如果选择了分享 SDK,这里注意一下,在选择了之后是可以单独设置分享到那些平台的。

enter image description here

Android 集成

首先要将下载的 jar 包导入到项目的 app/libs 下,如果文件夹不存在可以创建一个新的。

enter image description here

enter image description here

如果内部还包含依赖,比如下面这个就是还有依赖,里面的文件还包括 .so 后缀的文件,此时需要将整个文件夹也拷贝进去。

enter image description here

在 MainApplication.java 中添加友盟的初始化配置,这里第三个参数就是推送的 key,如果没有集成推送可以不填。

enter image description here

如果提示 UMConfigure 找不到引用,这应该是刚才导入的 jar 包没有引用到项目所导致的,可以在 jar 上点击右键,在弹出的菜单中选择 add as lib… 将 jar 包链接到我们的项目。

enter image description here

现在来修改 AndroidManifest.xml 文件,将相关权限和友盟的 Appkey 等信息填进去。

enter image description here

填写 key 的时候注意一下,key 是填写在 application 节点下的。

enter image description here

如果需要统计页面的消息,还需要在首页加入统计的代码,在 MainActivity.java 中设置开启统计,默认创建的代码是没有 onCreate 方法的,需要我们自己来添加这个方法。

enter image description here

iOS 集成

请在你的工程目录结构中,添加友盟统计框架,在选项 TARGETS→Build Phases→Link Binary With Libraries→Add Other,选择文件 UMMobClick.framework 等文件并选择确认。

检查下面的引用库,查看是否存在下面的几个库,没有就添加上就好了。

enter image description here

SystemConfiguration.framework
CoreGraphics.framework
CoreTelephony.framework
ImageIO.framework
libsqlite3.tbd
libc++.tbd
libz.tbd

如果有更多的分享还需要将分享的平台加入白名单。

enter image description here

在 AppDelegate.m 中添加友盟的初始化代码,如果提示引用错误,请返回检查 link 的库是否正确。

#import <UMCommon/UMConfigure.h>


  [UMConfigure setLogEnabled:YES];
  [UMConfigure initWithAppkey:@"599d6d81c62dca07c5001db6" channel:@"App Store"];
  //统计
  [MobClick setScenarioType:E_UM_NORMAL];

到这里友盟的集成就告一段落了,更多更详细的设置还需要大家在后面自行研究,如果你对 iOS 的语法不熟悉的话还是建议先学一学,后面需要设置的东西更加精细化也更加复杂,若对 iOS 没有一定的了解的话很难解决其中遇到的问题。

如果想了解集成支付宝的可以参考支付宝第三方组件,详见这里

发表评论