Javascript 在本机firebase v6上显示通知

我使用的是最新的react native版本0.62和最新版本的react native firebase，即v6。我能够得到通知，它在后台运行良好，但它不会显示在前台

以下是截图：

这是我的代码：

checkPermission = async () => {
    const enabled = await messaging().hasPermission();
    console.log('enabled ******* ',enabled)
    if (enabled) {
      this.getFcmToken();
    } else {
      this.requestPermission();
    }
  };

  getFcmToken = async () => {
    const fcmToken = await messaging().getToken();
    if (fcmToken) {
      console.log('Your Firebase Token is:', fcmToken);
      // this.showAlert('Your Firebase Token is:', fcmToken);
    } else {
      console.log('Failed', 'No token received');
    }
  };

  requestPermission = async () => {
    try {
      await messaging().requestPermission();
      // User has authorised
    } catch (error) {
      // User has rejected permissions
    }
  };

  messageListener = async () => {
    console.log('inside message listener ****** ')

    messaging().onMessage(async remoteMessage => {
      Alert.alert('A new FCM message arrived!', JSON.stringify(remoteMessage));
  };

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

  componentDidMount() {
    this.checkPermission();
    this.messageListener();
  }

---

添加函数messageListener的行

const localNotif = new firebase.notifications.Notification()
                .setTitle('Gazelkin')
                .setBody(message.data.message)
                .setSound('default')

firebase.notifications().displayNotification(localNotif).catch(err => console.error(err))

---

默认情况下，rnfirebase不支持在应用程序处于前台状态时显示通知弹出窗口，如前所述。所以，推送通知弹出窗口仅在应用程序处于后台状态或关闭时显示

所以，如果您还想在前台模式下显示推送通知，那么您必须使用额外的库，该库将作为本地通知显示激发的推送通知，正如他们在文档中提到的那样

如果RemoteMessage负载在发送到onMessage处理程序时包含通知属性，则设备不会向用户显示任何通知。相反，您可以触发本地通知或更新应用程序内UI以发出新通知

所以，作为一种解决方案，当应用程序位于前台时，您可以使用它来触发推送通知

要执行此操作，只需通过以下命令安装：

npm i响应本机推送通知

对于android，您不需要遵循任何本机安装步骤，只需通过此命令安装库，然后您就可以触发本地推送通知，如下所示： 创建一个名为NotificationController.android.js的文件：

import React，{useffect}来自“React”；
从“react native”导入{Alert}；
从“@react native firebase/messaging”导入消息；
从“反应本机推送通知”导入推送通知；
const NotificationController=（道具）=>{
useffect（（）=>{
const unsubscribe=messaging（）.onMessage（异步（远程消息）=>{
PushNotification.localNotification({
消息：remoteMessage.notification.body，
标题：remoteMessage.notification.title，
bigPictureUrl:remoteMessage.notification.android.imageUrl，
smallIcon:remoteMessage.notification.android.imageUrl，
});
});
退订；
}, []);
返回null；
};
导出默认通知控制器；

现在，当应用程序处于前台状态时，如果

onMessage

从firebase收到任何消息，则

PushNotification

将触发本地通知

更新：适用于iOS 对于iOS，您必须使用以下命令安装

@react native community/push notification iOS

：

npm i@react本机社区/推送通知ios

另外，请按照文档中建议的所有本机安装步骤进行操作

然后，您可以创建名为NotificationController.ios.js的文件，您可以在其中处理ios通知

从“react”导入{useffect}；
从“react native”导入{Alert}；
从“@react native firebase/messaging”导入消息；
从“反应本机推送通知”导入推送通知；
从“@react native community/push notification ios”导入PushNotificationIos；
const NotificationController=（道具）=>{
const navigation=useNavigation（）；
//通过单击通知打开应用程序时调用
//并在应用程序已打开且用户单击通知时调用
PushNotification.configure({
onNotification：（通知）=>{
如果（通知）{
控制台日志（通知）；
Alert.Alert（'Opened push notification'，JSON.stringify（notification））；
}
},
});
useffect（（）=>{
//用于在应用程序位于前台时显示通知
const unsubscribe=messaging（）.onMessage（异步（远程消息）=>{
PushNotificationIos.addNotificationRequest({
id:remoteMessage.messageId，
正文：remoteMessage.notification.body，
标题：remoteMessage.notification.title，
userInfo:remoteMessage.data，
});
});
退订；
}, []);
返回null；
};
导出默认通知控制器；

---

现在，在主屏幕或应用程序初始路由文件中调用

。

遵循@Kishan Bharda解决方案，我必须为IOS前台通知做一些不同的操作（这里，我在index.js中有代码，而不是其他文件）：

---

它在firebase v6或更高版本上不起作用。Firebase文档建议使用notifee、react本机推送通知或其他通知库来构建可显示的本地通知。你可以查看变更日志你好兄弟你找到解决方案了吗this@ikmo如果你还在这个问题上，我已经添加了答案，请检查。

react native push notificationo

在频道开始创建之前不工作。你是如何做到的？谢谢，我不认为需要创建一个频道来推送通知以获得效果。

import { AppRegistry, Platform } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
import PushNotificationIOS from "@react-native-community/push-notification-ios";
import PushNotification from "react-native-push-notification";

if (Platform.OS === 'ios') {
    // Must be outside of any component LifeCycle (such as `componentDidMount`).
    PushNotification.configure({
        onNotification: function (notification) {
            console.log("NOTIFICATION:", notification);
            const { foreground, userInteraction, title, message } = notification;
            if (foreground && (title || message) && !userInteraction) PushNotification.localNotification(notification);
            notification.finish(PushNotificationIOS.FetchResult.NoData);
        }
    });
}

AppRegistry.registerComponent(appName, () => App);