【ReactNative|极光】react-native 0.62版本搭配极光实现推送功能-android篇

Vicissitidues

已于 2023-07-17 17:33:48 修改

阅读量458

点赞数 2

分类专栏： ReactNative填坑文章标签： react native android react.js

于 2023-06-28 11:32:10 首次发布

本文链接：https://blog.csdn.net/qq_40241320/article/details/131432161

版权

ReactNative填坑专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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的缘故）