之前集成了个推到项目中，现在需要完成接收到消息后展示通知（Notification），消息发送通过个推（消息发送使用的是个推的透传，和整个个推渠道有区别，不会自动生成notification），只需要在接收到消息后，生成展示notification。这里使用插件react-native-push-notification
1、在 终端进入到壳子根目录下分别执行
npm install react-native-push-notification
react-native link react-native-push-notification
执行react-native run-android，终端报错
androidx适配异常
修改引入的react-native-push-notification版本到3.1.3，再进入到react-native-push-notification依赖包的build.gradle文件，修改依赖的第三方包版本如下
可正常运行Android 端（react-native run-android）
2、终端进入到自己的项目根目录下分别执行
npm install react-native-push-notification@3.1.3
react-native link react-native-push-notification
在官网中，有这么一段话
翻译一下
然后按照对应版本的官方文档react-native-push-notification - npm，进行Android端设置，在壳子android下的AndroidManifest.xml文件中，添加如下代码（只做notification展示，所以只需要PushNotification.localNotification()即可）：
<service
android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService"
android:exported="false" >
<intent-filter>
<action android:name="com.google.firebase.MESSAGING_EVENT" />
</intent-filter>
</service>
<meta-data android:name="com.dieam.reactnativepushnotification.notification_channel_name" android:value="YOUR NOTIFICATION CHANNEL NAME" />
<meta-data android:name="com.dieam.reactnativepushnotification.notification_channel_description" android:value="YOUR NOTIFICATION CHANNEL DESCRIPTION" />
<!-- Change the resource name to your App's accent color - or any other color you want -->
<meta-data android:name="com.dieam.reactnativepushnotification.notification_color" android:resource="@android:color/white" />
在需要引用notification的地方添加代码：
PushNotification.localNotification({
/* Android Only Properties */
id: '0', // (optional) Valid unique 32 bit integer specified as string. default: Autogenerated Unique ID
ticker: "My Notification Ticker", // (optional)
autoCancel: true, // (optional) default: true
largeIcon: "ic_launcher", // (optional) default: "ic_launcher"
smallIcon: "ic_notification", // (optional) default: "ic_notification" with fallback for "ic_launcher"
bigText: "My big text that will be shown when notification is expanded", // (optional) default: "message" prop
subText: "This is a subText", // (optional) default: none
color: "red", // (optional) default: system default
vibrate: true, // (optional) default: true
vibration: 300, // vibration length in milliseconds, ignored if vibrate=false, default: 1000
tag: 'some_tag', // (optional) add tag to message
group: "group", // (optional) add group to message
ongoing: false, // (optional) set whether this is an "ongoing" notification
priority: "high", // (optional) set notification priority, default: high
visibility: "private", // (optional) set notification visibility, default: private
importance: "high", // (optional) set notification importance, default: high
/* iOS only properties */
alertAction: 'view',// (optional) default: view
category: null,// (optional) default: null
userInfo: null,// (optional) default: null (object containing additional notification data)
/* iOS and Android properties */
title: "My Notification Title", // (optional)
message: "My Notification Message", // (required)
playSound: false, // (optional) default: true
soundName: 'default', // (optional) Sound to play when the notification is shown. Value of 'default' plays the default sound. It can be set to a custom sound such as 'android.resource://com.xyz/raw/my_sound'. It will look for the 'my_sound' audio file in 'res/raw' directory and play it. default: 'default' (default sound is played)
number: '10', // (optional) Valid 32 bit integer specified as string. default: none (Cannot be zero)
repeatType: 'day', // (optional) Repeating interval. Check 'Repeating Notifications' section for more info.
actions: '["Yes", "No"]', // (Android only) See the doc for notification actions to know more
});
运行Android 端之后，可以看到发送的notification成功
通过调整PushNotification.localNotification参数来达到需要的样式和信息。
3、点击notification
notification的点击触发通过PushNotification.configure()来实现。其中的方法
onNotification: function (notification) {
console.log('NOTIFICATION:', notification);
// process the notification
// required on iOS only (see fetchCompletionHandler docs: https://facebook.github.io/react-native/docs/pushnotificationios.html)
// notification.finish(PushNotificationIOS.FetchResult.NoData);
},
其中的notification参数会把第二步中的PushNotification.localNotification()全部参数返回，通过解析来达到跳转或者网络请求。
到这一步为止，Android端的notification就完成了。
4、再来看一看iOS。先不修改代码，直接运行看看会有什么效果。emmm～～虽说不会报错，但也没有任何效果
做了各种配置，也进行了各种测试，浪费了很久的时间才发现，ios模拟器不支持消息推送，一口老血喷出来。既然这样的话，ios的推送就放到等到公司提供了测试机之后的篇章里讲吧。
网友评论