react-native极光推送集成(jpush-react-native)

之前写了一篇阿里云推送的文章（https://www.jianshu.com/p/83092e8817e7)，今天把极光推送也和大家分享一下。

1、jpush-react-native 自 1.4.4 之后, 需要安装 jcore-react-native大家一定要注意安装下。
2、然后 npm install jpush-react-native jcore-react-native --save
3、react-native link后根据提示，输入 appKey(在极光推送官网申请应用得到)

IOS

link后iOS还需要几步手动操作

在 iOS 工程中设置 TARGETS-> BUILD Phases -> LinkBinary with Libraries 找到 UserNotifications.framework 把 status设为optional
在 iOS 工程中如果找不到头文件可能要在 TARGETS-> BUILD SETTINGS -> Search Paths -> Header Search Paths 添加如下路径
$(SRCROOT)/../node_modules/jpush-react-native/ios/RCTJPushModule(link后应该就已经存在了)

Android

检查Android配置是否齐全

查看 app 下的 build.gradle 配置

android {
    defaultConfig {
        applicationId "yourApplicationId"//yourApplicationId 替换为你的项目的包名
        ...
        manifestPlaceholders = [
                JPUSH_APPKEY: "yourAppKey", //在此替换你的APPKey
                APP_CHANNEL: "default"    //link后此处不用修改
        ]
    }
}
...
dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation project(':jpush-react-native')  // 添加 jpush 依赖
    implementation project(':jcore-react-native')  // 添加 jcore 依赖
    implementation "com.facebook.react:react-native:+"  // From node_modules
}

查看 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')

查看 android/app/AndroidManifest.xml下是否存在

    <application
        ...
        <!-- Required . Enable it you can get statistics data with channel -->
        <meta-data android:name="JPUSH_CHANNEL" android:value="${APP_CHANNEL}"/> //不需要任何改动
        <meta-data android:name="JPUSH_APPKEY" android:value="${JPUSH_APPKEY}"/> //不需要任何改动

    </application>

在项目中引用

import JPushModule from 'jpush-react-native';
jumpSecondActivity () {
    //点击推送消息，在此进行页面跳转
    // this.props.navigation.navigate('Push')

    
    // JPushModule.jumpToPushActivityWithParams('SecondActivity', {
    //   hello: 'world'
    // })

  }
  componentDidMount() {
    // 新版本必需写回调函数
    // JPushModule.notifyJSDidLoad();
    if (Platform.OS === 'android') {
      JPushModule.initPush()
      JPushModule.getInfo(map => {
        this.setState({

        })
      });
      JPushModule.notifyJSDidLoad(resultCode => {
        if (resultCode === 0) {
        }
      })
    } else {
      JPushModule.setupPush()
    }

    // 接收自定义消息
    JPushModule.addReceiveCustomMsgListener((message) => {
      this.setState({pushMsg: message});
    });
    // 接收推送通知
    JPushModule.addReceiveNotificationListener((message) => {
      console.log("receive notification: " + message);
    });
    // 打开通知
    JPushModule.addReceiveOpenNotificationListener((map) => {
      console.log("Opening notification!");
      console.log("map.extra: " + map.extras);
      // 可执行跳转操作，也可跳转原生页面
      // this.props.navigation.navigate("SecondActivity");
    });
  }
  componentWillUnmount() {
    JPushModule.removeReceiveCustomMsgListener();
    JPushModule.removeReceiveNotificationListener();
  }

注意：在极光推送里面注册应用时，推送设置需要分别Android和iOS，Android只需要包名，我就不做说明了，主要说下iOS。

登陆苹果开发者网站进入开发者账户。

go_to_account_page

从开发者账户页面左侧入口进入 “Certificates, IDs & Profiles” 页面。

go_to_cert_page

创建 App ID，填写 App ID 的 NAME 和 Bundle ID（如果 ID 已经存在可以直接跳过此步骤）。

add_appid

    注: 此处需要指定具体的 Bundle ID 不要使用通配符。

appid_suffix

为 App 开启 Push Notification 功能。如果是已经创建的 App ID 也可以通过设置开启 Push Notification 功能。

appid_service

填写好以上属性后，点击 “Continue”，确认 AppId 属性的正确性，点击 “Register”，注册 AppId 成功。

两种鉴权方式的配置

极光官网应用的鉴权信息一旦配置，只能用相同 bundleID 的鉴权信息进行更新，无法修改为其他的 bundleID，请在配置前仔细检查 bundleID 是否正确。

方式一：通过 .p12 证书鉴权

如果你之前没有创建过 Push 证书或者是要重新创建一个新的，请在证书列表下面新建。

add_cert

新建证书需要注意选择 APNs 证书种类。如图 APNs 证书有开发（Development）和生产（Production）两种。

    注：开发证书用于开发调试使用；生产证书既能用于开发调试，也可用于产品发布。此处我们选择生产证书为例。

cert_type

点击 "Continue", 之后选择该证书准备绑定的 AppID。

cert_to_app

点击 “Continue”，会进入 CSR 说明界面。

need_CSR

再点 “Continue” 会让你上传 CSR 文件。（ CSR 文件会在下一步创建）

update_CSR

△△△Certificate Signing Request文件一定要重新生成一个！！！！

打开系统自带的 KeychainAccess 创建 Certificate Signing Request。如下图操作：

open_keychain

填写“用户邮箱”和“常用名称” ，并选择“存储到磁盘”，证书文件后缀为 .certSigningRequest 。

cert_info

回到浏览器中 CSR 上传页面，上传刚刚生成的后缀为 .certSigningRequest 的文件。
生成证书成功后，点击 “Download” 按钮把证书下载下来，是后缀为 .cer 的文件。

cert_ready

双击证书后，会在 “KeychainAccess” 中打开，选择左侧“钥匙串”列表中“登录”，以及“种类”列表中“我的证书”，找到刚才下载的证书，并导出为 .p12 文件。如下图：

export_p12

save_p12

在极光控制台上，进入你应用的应用设置中 iOS 的鉴权方式选择 “证书”，上传刚才导出的 .p12 证书。极光会在后台为你的应用进行鉴权。
Apple 的生产推送证书允许用于开发环境的推送，勾选将生产证书用于开发环境，开发者可以仅上传生产证书，即可在官网推送平台处选择开发环境做推送，不用再生成和上传开发证书。

add_to_portal

方式二：通过 APNs Auth Key 鉴权

点击左侧列表 “Keys” 中的 “All”，看账户中是否已有 auth key，没有则点击 “+” 新建。

go_to_add_auth_key

填写该 key 的描述并选择服务，如下图。（注：在开发和生产环境均可使用，且不会过期。）

create_auth_key

点击 “Continue” 让你确认信息，再点击 “confirm”，就可以下载该 key 了。（注意：记下 key id，而且只可以下载一次，请妥善保存。）

download_auth_key

获取你之前创建过的应用的 Bundle ID

get_bundle_id

在开发者账户的 “Membership” 页面获取 Team ID

get_team_id

在极光控制台上，进入你应用的应用设置中 iOS 的鉴权方式选择 “Token Authentication”，上传 auth key 文件，并填写你的 KEY ID，TeamID，和指定应用的 BundleID。极光会在后台为你的应用进行鉴权。