【问题标题】:How Cloud Messaging Works in react-native-firebase v6.x.x?云消息传递如何在 react-native-firebase v6.x.x 中工作?
【发布时间】:2019-12-08 05:36:39
【问题描述】:

我已经安装了react-native-firebase v6.2,但是现在我找不到一个很好的帮助来实现云消息传递。

谁能帮助如何在没有通知模块的情况下使用云消息传递?

由于通知模块已从 v6 中删除,我决定只使用云消息传递,但我不知道该怎么做。

远程通知的权限和请求正常。 这是我发送给自己的代码,但它不适用于 android,请提供任何帮助

const sendNotification = async ()=> {
    try {
        const firebaseAPIKey = "QEOEKDjjIS1E6ZDKSKJXAxdkIGk3qTb4FXCMs";
        const notifyMessage = {
            registration_ids: ["fheeeEaBwK0HM:eoOELDL6BUEdNUhRvJsjBv3x9dPLybZqqBoqJ_wzcE5_pbl-e1nnIsLhbzJd5-_R4MNhVYtuCLXWjWSguLfKTOqXR0gEfhgukdIw-AexChDjy8tI6u7f04i5xtOkaAJgU"],
            notification: {
                "title": "Muhammad Wafa",
                "body": "Hi dear this is a simple message.",
                "vibrate": 1,
                "sound": 1,
                "show_in_foreground": true,
                "priority": "high",
                "content_available": true
            }
        }

        let headers = new Headers({
            "Content-Type": "application/json",
            "Authorization": `key=${firebaseAPIKey}`
        });

        let response = await fetch("https://fcm.googleapis.com/fcm/send", {method: "POST", headers, body: JSON.stringify(notifyMessage)});
        console.log('response', response);
    } catch (err) {
        console.log('Error in : sendNotification', err);
    }
}

【问题讨论】:

  • 你找到解决办法了吗?

标签: javascript firebase react-native firebase-cloud-messaging react-native-firebase


【解决方案1】:

如果您的应用在前台,那么您将看不到任何通知。

Notifications 模块在 react-native-firebase-v6 中不再可用,这意味着现在要显示本地推送通知,您必须依赖任何其他库,例如react-native-push-notification。除了这个,其他的应该都可以正常工作。

这是我的 App.js-

import messaging from '@react-native-firebase/messaging';
// ... other imports

const App = () => {
  useEffect(() => {
    // Notification caused app to open from background state
    const onNotificationOpenedListener = messaging().onNotificationOpenedApp(
      remoteMessage => {
        console.log(remoteMessage, 'App.useEffect.onNotificationOpenedListener');
      }
    );

    // Check whether an initial notification is available
    // Notification caused app to open from quit state
    messaging()
      .getInitialNotification()
      .then(remoteMessage => {
        if (remoteMessage) {
          console.log(remoteMessage, 'App.useEffect.getInitialNotification');
        }
      });

    // Foreground state messages
    const onMessageReceivedListener = messaging().onMessage(
      async remoteMessage => {
        // show local notification using react-native-push-notification
        showLocalPushNotification(remoteMessage);
      }
    );

    return () => {
      // unsubscribe all listeners
      onNotificationOpenedListener();
      onMessageReceivedListener();
    };
  }, []);

  return (
    <Provider store={store}>
      <Navigation />
    </Provider>
  );
};

显示本地推送通知的工具-

// todo: implement click handler as firebase-messaging handlers are not fired
export const showLocalPushNotification = remoteMessage => {
  const { notification = {}, data = {} } = remoteMessage;
  PushNotification.localNotification({
    //smallIcon: 'ic_notification', // todo uncomment when resource is added
    channelId: '', // todo
    messageId: 'google:message_id',
    title: notification.title,
    message: notification.body,
    sound: 'default',
    data
  });
};

唯一的问题是单击本地通知时不会触发通知处理程序 (onNotificationOpenedApp/getInitialNotification)。我可以继续使用 react-native-push-notification 注册通知处理程序,但最终我将拥有两个用于相同功能的处理程序。

还没有找到解决办法。

我的 index.js-

import { AppRegistry } from 'react-native';
import messaging from '@react-native-firebase/messaging';

import App from './App';
import { name as appName } from './app.json';

// Register background handler
messaging().setBackgroundMessageHandler(async remoteMessage => {
  // Data only messages will be ignored when app is in Background, it can be handled here
  console.log(remoteMessage, 'index.setBackgroundMessageHandler');
});

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

AndroidManifest.xml 中不需要服务注册

【讨论】:

    猜你喜欢
    • 2021-02-18
    • 1970-01-01
    • 2023-04-01
    • 1970-01-01
    • 1970-01-01
    • 2021-08-04
    • 1970-01-01
    • 1970-01-01
    • 2021-06-30
    相关资源
    最近更新 更多