Javascript 推送通知在前台显示时出错

我有一个应用程序，我想在其中使用react native firebase启用推送通知。我已经完成了所有的手动设置。我在应用程序处于后台时收到通知。但是，当它位于前台时，它会显示一个错误，如：\u this.showAlert（）不是一个函数，当同样的东西在后台工作时。以下是我的AndroidManifest.xml和App.js代码：

import React，{Component}来自'React'；
从“react native”导入{样式表、文本、视图、警报、异步存储}；
从“react native firebase”导入firebase；
导出默认类应用程序扩展组件{
componentDidMount（）{
这是checkPermission（）；
this.createNotificationListeners（）；//添加此行
}
组件将卸载（）{
这是通知听者；
此.notificationOpenedListener；
}
//
异步检查权限（）{
const enabled=等待firebase.messaging（）.hasPermission（）；
如果（已启用）{
这个。getToken（）；
}否则{
这个.requestPermission（）；
}
}
异步createNotificationListeners（）{
/*
*在前台收到特定通知时触发
* */
this.notificationListener=firebase.notifications（）.onNotification（（通知）=>{
const{title，body}=通知；
log（'onNotification:'）；
showarert（标题、正文）；
警报（“消息”）；
const localNotification=new firebase.notifications.Notification({
声音：“sampleaudio”，
在前景中显示：真，
})
.setNotificationId（notification.notificationId）
.setTitle（notification.title）
//.setSubtitle（通知.副标题）
.setBody（notification.body）
//.setData（notification.data）
.android.setChannelId（'fcm_default_channel'）//例如，您在上面选择的id
.android.setSmallIcon（'@drawable/ic_launcher'）//在android Studio中创建此图标
.android.setColor（'#000000'）//您可以在此处设置颜色
.android.setPriority（firebase.notifications.android.Priority.High）；
firebase.notifications（）
.displayNotification（本地通知）
.catch（err=>console.error（err））；
});
const channel=new firebase.notifications.Android.channel（'fcm_default_channel'，'Demo app name'，firebase.notifications.Android.Importance.High）
.setDescription（'演示应用程序说明'）
.setSound（'sampleaudio.mp3'）；
firebase.notifications（）.android.createChannel（通道）；
/*
*如果您的应用程序位于后台，则您可以在单击/点击/打开通知时进行监听，如下所示：
* */
this.notificationOpenedListener=firebase.notifications（）.onNotificationOpened（（notificationOpen）=>{
const{title，body}=notificationOpen.notification；
log（'onNotificationOpened:'）；
showarert（标题、正文）；
});
/*
*如果您的应用程序已关闭，您可以检查它是否通过单击/点击/打开通知打开，如下所示：
* */
const notificationOpen=wait firebase.notifications（）.getInitialNotification（）；
如果（通知打开）{
const{title，body}=notificationOpen.notification；
log（'getInitialNotification:'）；
showarert（标题、正文）；
}
/*
*为前台中的仅数据有效负载触发
* */
this.messageListener=firebase.messaging（）.onMessage（（message）=>{
//进程数据消息
log（JSON.stringify（message））；
});
}
//3
异步getToken（）{
让fcmToken=等待AsyncStorage.getItem（'fcmToken'）；
如果（！fcmToken）{
fcmToken=await firebase.messaging（）.getToken（）；
如果（fcmToken）{
//用户有一个设备令牌
log（'fcmToken:'，fcmToken）；
等待AsyncStorage.setItem（'fcmToken'，fcmToken）；
}
}
log（'fcmToken:'，fcmToken）；
}
//2
异步请求权限（）{
试一试{
等待firebase.messaging（）.requestPermission（）；
//用户已授权
这个。getToken（）；
}捕获（错误）{
//用户已拒绝权限
log（“权限被拒绝”）；
}
}
render（）{
返回(
欢迎来到这里！
要开始，请编辑App.js
说明书
);
}
}

只需添加showAlert功能：

showAlert(title, body) {
 Alert.alert(
  title, body,
  [
    { text: 'OK', onPress: () => console.log('OK Pressed') },
  ],
  { cancelable: false },
 );
}

---

我没有看到showAlert定义？我只是删除了showAlert，它工作正常，但当我尝试从前台通知打开应用程序时，它会显示相同的错误。我不知道该怎么解决这个问题。如果需要showAlert定义，那么它在后台的工作方式是完美的，因为我在后台也使用了showAlert。尝试将其移动到组件“this.createNotificationListeners（）；”的构造函数中，结果仍然相同。当我尝试从前台通知打开应用程序时，它会显示错误。showAlert（）不是函数。对于后台通知，这是可以的。有没有解决这个问题的建议@阿什温莫西拉