Expo(React Native)集成JPush极光推送(Android)React Native最新的Expo框架中

Expo(React Native)集成JPush极光推送(Android)

编写于2024年9月28日

Expo项目目录树(当前使用的是Expo官方示例项目, 已修改为Javascript)

├── app
├── app.json
├── assets
├── babel.config.js
├── components
├── constants
├── expo-env.d.ts
├── hooks
├── jsconfig.json
├── package-lock.json
├── package.json
└── README.md

Jpush-react-native

0. 安装JPush SDK 与预编译Expo

打开项目终端, 在项目中安装jpush-react-native和jcore-react-native

npx expo install jpush-react-native jcore-react-native

出现added 2 packages in 4s 即可

终端输入命令将Expo项目进行预编译, 注意: iOS平台只能在Mac电脑上进行预编译, Windows仅能预编译Android平台

npx expo prebuild

接下来就是根据实际情况进行填写内容

📝  Android package Learn more: https://expo.fyi/android-package

? What would you like your Android package name to be? » #[输入JPush预留的包名, 可以在JPush的后台看到]

✔ Created native directory
✔ Updated package.json
✔ Finished prebuild

在预编译完成后, 可以在目录中看到android或ios的目录

├── android # Android平台目录
├── app
├── app.json
├── assets
├── babel.config.js
├── components
├── constants
├── expo-env.d.ts
├── hooks
├── jsconfig.json
├── node_modules
├── package-lock.json
├── package.json
└── README.md

1. 配置

打开android > app > build.gradle, 找到android字段

在填入JPush的AppKey前, 检查applicationId是否与平台的设置的包名一致

接着在defaultConfig中加入自己的JPush的AppKey

manifestPlaceholders = [
                JPUSH_APPKEY: "e546**********a1fa",   //在此替换你的APPKey
                JPUSH_CHANNEL: "test"                 //在此替换你的channel
]

打开android > app > src > main > AndroidManifest.xml, 找到application字段

在里面添加以下代码

<meta-data android:name="JPUSH_CHANNEL" android:value="${JPUSH_CHANNEL}" />
<meta-data android:name="JPUSH_APPKEY" android:value="${JPUSH_APPKEY}" />

(可选) 在项目中找到android > setting.gradle, 文件最后最佳以下代码, 注: 没有此文件可以暂时不管

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

2. 运行项目

请注意: 由于gradle大部分的包都在国外服务器, 下载过程可能会出现连接超时, 可以在互联网搜索`gradle换源`或`gradle配置代理`或者终端中配置代理

在项目根目录中, 终端输入以下代码, 在运行的同时可以打开任意的已开启ADB的模拟器或真机

npx expo run:android

出现BUILD SUCCESSFUL字眼则表示构建成功, 接下来就是打开模拟器或者真机进行运行Expo项目

3. 测试推送

请注意: 本次演示项目将在项目的主入口开始注册消息推送, 请自行判断自己项目的注册消息推送的时机;

本次使用的是函数组件写法, 类组件写法可自行参考官方写法

app目录文件树

├── (tabs)
|  ├── explore.jsx
|  ├── index.jsx
|  └── _layout.jsx
├── +html.jsx
├── +not-found.jsx
└── _layout.jsx

注册消息推送

将消息推送注册在(tabs)/_layout.jsx, 原因是在页面加载完成后, 加载_layout.jsx路由内容

import JPush from 'jpush-react-native';

export default function TabLayout() {
  useEffect(()=>{
    // 注册消息推送
    JPush.init({
      appKey: "", // 填写自己项目的AppKey
      channel: "dev" // 配置推送channel渠道名称, 指明应用程序包的下载渠道，为方便分渠道统计，具体值由你自行定义，如华为应用市场等。本次使用dev
    });
    
    // 监听消息推送是否注册成功
    JPush.addConnectEventListener(r=>{
      console.log(r);
    });
  })  
}

打开模拟器页面, 在终端中可以看到输出的log为true即连接成功

{"connectEnable": true}

将监听注册消息推送的函数处理方法稍作修改, 获取到registerID

JPush.addConnectEventListener((r) => {
  if(r.connectEnable){
    JPush.getRegistrationID(r=>{
      console.log(`registerID: ${r.registerID}`);
    })
  }
});

registerID: 13065ffa4f3c7d191ad

当拿到这个ID的时候, 就可以做消息推送了

接收推送的消息

在useEffect中注册消息接收的监听器, 如下代码
```
JPush.addNotificationListener(r=>{
  console.log(JSON.stringify(r)) // 此处仅作为演示处理
})
```
addNotificationListener为默认的监听常见通知消息的监听器, 其余监听器有:
- addCustomMessageListener: 监听自定义通知消息监听器
- addLocalNotificationListener: 监听本地通知消息监听器
- addInappMessageListener: 监听APP内通知消息监听器
更多监听器可以查看官方文档或者官方源码
测试消息推送

在JPush后台管理中, 创建新的消息通知推送

这些内容填写完成后点击发送预览, 将会弹出消息推送的预览效果

核对好发送的信息等内容是否正确后点击发送

此时你就能在终端中看到log输出了
```
 {"content":"通知内容","messageID":"18101751194516367","title":"通知标题","notificationEventType":"notificationArrived"}
```
- content: 内容
- title: 标题
- messageID: 消息id
- notificationEventType: 消息类型

Expo(React Native)集成JPush极光推送(Android)