如何在 Android (React Native) 上向 FCM 通知添加操作按钮

Question

我正在尝试将操作按钮添加到我的 React Native 应用程序的 fcm 远程通知中，我确实在 ios 中实现了这一点，但无法让它在 Android 上工作

正在发送通知，但不出现操作按钮。

这是我的设置：

1。服务器端（FCM API v1）：

const { GoogleAuth } = require("google-auth-library");

async function getAccessToken() {
    // get access token code
}

async function sendNotification(topic, medicationName, scheduledTime) {
    const accessToken = await getAccessToken();

    const response = await fetch(
        "https://fcm.googleapis.com/v1/projects/my-sobrus-beta/messages:send",
        {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                Authorization: `Bearer ${accessToken}`,
            },
            body: JSON.stringify({
                message: {
                    topic: topic,
                    notification: {
                        title: // notif title,
                        body: // notif body,
                    },
                    android: {
                        notification: {
                            sound: "default",
                            click_action: // click action intent id,
                            channelId: // some channel id,
                        },
                        priority: "HIGH",
                    },
                    apns: {
                        payload: {
                            aps: {
                                sound: "default",
                                category: // category id,
                                contentAvailable: true,
                                mutableContent: true,
                            },
                        },
                    },
                    data: {
                        // some data
                    },
                },
            }),
        }
    );

    const responseData = await response.json();
    console.log(responseData);
}

const topic = // topic that phones subscribed to

sendNotification(topic)
    .then(() => console.log("Notification sent successfully"))
    .catch(console.error);

2。反应本机端：

我在应用程序入口点index.js中所说的：

import PushNotification from 'react-native-push-notification';
import PushNotificationIOS from '@react-native-community/push-notification-ios';
import {handleNotification} from './handlers';
import {setupNotificationCategories} from './categories';

PushNotification.createChannel(
    {
        channelId: // some channel id,
        channelName: // some channel name,
        channelDescription: // some channel description,
        soundName: 'default',
        importance: 4,
        vibrate: true,
    },
    created => console.log(`createChannel returned '${created}'`),
);

setupNotificationCategories();

PushNotification.configure({
    onNotification: function (notification) {
        handleNotification(notification);
        notification.finish(PushNotificationIOS.FetchResult.NoData);
    },
});

• handleNotification

  ：处理通知操作按钮点击（基本上触发一些api请求）。

• setupNotificationCategories

  ：设置 iOS 的操作按钮

类别.ts

import PushNotificationIOS from '@react-native-community/push-notification-ios';
import {Platform} from 'react-native';

export function setupNotificationCategories() {
    if (Platform.OS === 'android') return;

    PushNotificationIOS.setNotificationCategories([
        {
            id: // id I sent in the server,
            actions: [
                // actions configs
            ],
        },
    ]);
}

我试过了：

• 尝试了我在互联网上找到的所有内容：D

Answer 1

在react-native-push-notification依赖项中有一个配置，您可以在其中创建静态操作，从应用程序配置，例如：

import PushNotification from ‘react-native-push-notification’;

PushNotification.localNotification({
  title: ‘Notification with actions’,
  message: ‘This notification has action buttons’,
  actions: [‘Accept’, ‘Decline’], // Here you define the actions
  playSound: false,
  soundName: ‘default’,
});

然后你必须在 PushNotification.configure({}) 的 onNotification 中配置每个动作，例如：

PushNotification.configure({
  onNotification: function (notification) {
    if (notification.action === ‘Accept’) {
      // Handles the click on the ‘Accept’ button
      console.log(‘Accepted!’);
    } else if (notification.action === ‘Decline’) {
      // Handles the click on the ‘Decline’ button
      console.log(‘Declined!’);
    }

    notification.finish(PushNotificationIOS.FetchResult.NoData);
  },
});

值得注意的是，此信息位于文档中，因此它指定“actions”键仅适用于 Android，其中显示 （仅限 Android）请参阅文档以了解通知操作以了解更多信息。此外，还有一个部分告诉我们如何使用这些操作https://www.npmjs.com/package/react-native-push-notification#notification-actions