1.前言
需要使用ReactNative框架实现消息推送,经过考察基本上还是极光做的比较全面,并且对于rn这样的框架有专门的npm包进行适配,遂决定将推送服务选取为极光。
注意:由于rn版本众多且写法不同,本方法是针对reactNative0.62.2版本操作的,不一定适用其他版本,如果你是踩了很多坑还是收不到推送,可以看看这里
如果需要了解iOS接入方式的,请点击这里
2.准备
react-native版本 0.62.2
安装JCore和JPush
link这两个库
安装
npm install jpush-react-native --save
如果项目里面没有jcore 则需要安装:
npm install jcore-react-native --save
链接
react-native link jpush-react-native
react-native link jcore-react-native
如此 我们需要安装的所有内容完成了
3.注册账号、配置sdk
这里按照官网注册一个账号,选择“极光推送”,按照教程一步步配置就好,这里不再赘述
4.配置【android】
我们对项目的Android文件进行配置
- 配置build.gradle [\android\app\build.gradle]
android{
...
defaultConfig{
...
manifestPlaceholders = [
JPUSH_APPKEY:"xxxxxxxxxx", //这里填写你的appkey,创建完应用就能取得
APP_CHANNEL:"default" //这里填写channel,暂时没有就先填写default
]
}
}
...
dependencies {
...
implementation project(':jpush-react-native') // 添加 jpush 依赖
implementation project(':jcore-react-native') // 添加 jcore 依赖
}
- 配置androidManifest.xml [\android\app\src\main\AndroidManifest.xml]
<manifest>
...
// 官方案例里有这些 我全数加上了
<permission
android:name="${applicationId}.permission.JPUSH_MESSAGE"
android:protectionLevel="signature" />
<uses-permission android:name="${applicationId}.permission.JPUSH_MESSAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>
...
<application>
...
// 注意这里,${}中的变量对应的就是在4.1中manifestPlaceholders 下的key
<meta-data android:name="JPUSH_CHANNEL" android:value="${APP_CHANNEL}"/>
<meta-data android:name="JPUSH_APPKEY" android:value="${JPUSH_APPKEY}"/>
</application>
</manifest>
- 配置settings.gradle [\android\settings.gradle]
//如果你之前link了,这里应该是已经存在的,无需配置
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')
- 配置App.js
// 按照前面的配置,android还是无法收到消息,最后发现是没有初始化的缘故,遂加上如下内容
...
import JPush from 'jpush-react-native';
export default class App extends Component {
...
componentDidMount() {
JPush.init({"appKey":"你的key","channel":"default","production":1});
}
}
后记
按照如上操作,我的app就能正常接受消息了,后续包括接收回调等功能在appjs里写就可以了,没有难度。这次踩了相当多的坑,浪费了很多不该浪费的时间,原因基本上就是在于:
1.官方文档对rn支持的不好,要在npm或者git上看,且很多重要内容根本没提及,全靠自己去对比官方example配置。
2.官方example很难启动,rn搭环境+启动不同版本项目的难度大家懂得都懂。
3.技术支持相当糊弄,当时我注册账号主动加的我,后续开发过程有问题咨询基本上隔几十分钟再答复,答得也是牛头不对马嘴,然后再给你丢个语雀文档让你自己去体悟,我只能说不想做可以不做(也可能是我们现在是测试阶段,没买vip的缘故)