React Native Android 通知徽章计数图标

Question

我在 React Native Android 中创建了一个演示项目，用于自定义通知功能，我对所有 notifee 函数都使用了该功能，但现在我想再创建一项我遇到的功能，就像我的应用程序处于后台或退出/终止模式一样，并且有任何通知均通过 setBackgroundMessageHandler 和 displayNotifications 的功能来自 FCM 或 Postman API，然后我可以在我的应用程序徽标上方看到通知计数徽章，但我现在看不到，我只能看到有一种蓝色的当通知到来时，勾号就会出现，那么对于徽章计数，我应该做什么？

index.js 文件：

/**
 * @format
 */

import { AppRegistry, PermissionsAndroid } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
import messaging from '@react-native-firebase/messaging';
import notifee, { AndroidStyle } from '@notifee/react-native';
import NotifeeBadgeCount from 'react-native-notifee-badge-count';


messaging().setBackgroundMessageHandler(async remoteMessage => {
    console.log('setBackgroundMessageHandler: ', remoteMessage);
    NotifeeBadgeCount.setBadgeCountAsync(1);
    updateBadgeCount();
    await displayBackGroundNotifications(remoteMessage);
});

// messaging().getInitialNotification(async remoteMessage => {
//     console.log('messaging().getInitialNotification kill mode state REMOTEMESSAGE: ', remoteMessage);
//     displayBackGroundNotifications(remoteMessage);
// });
async function updateBadgeCount() {
    const count = await NotifeeBadgeCount.getBadgeCountAsync();
    if (count === 0) {
        NotifeeBadgeCount.setBadgeCountAsync(0);
    } else {
        NotifeeBadgeCount.setBadgeCountAsync(count + 1);
    }
}

notifee.onBackgroundEvent(async ({ type, detail }) => {
    // console.log('--------------------------------onBackgroundEvent', type, detail)
    // const { notification, pressAction } = detail;
    // if (type === EventType?.PRESS) {
    //     console.log('User pressed an action with the id: ', pressAction.id);
    //     navigation.navigate('Settings');
    // }
});


const displayBackGroundNotifications = async (remoteMessage) => {

    const channelId = await notifee.createChannel({
        id: 'default',
        name: 'Default Channel',
    });

    await notifee.displayNotification({
        title: remoteMessage?.data.title || 'notifee default Title',
        body: remoteMessage?.data.body || 'notifee default Body',
        android: {
            channelId,
            // smallIcon: 'name-of-a-small-icon', // optional, defaults to 'ic_launcher'.
            // pressAction is needed if you want the notification to open the app when pressed
            pressAction: {
                id: 'default',
            },
            color: '#4caf50',
            actions: [
                {
                    title: 'Reply',
                    icon: 'https://my-cdn.com/icons/reply.png',
                    pressAction: {
                        id: 'reply',
                    },
                    input: true, // enable free text input
                },
                {
                    title: 'Archive',
                    pressAction: {
                        id: 'Archive',
                    },
                },
            ],
            style: {
                type: AndroidStyle.BIGPICTURE,
                picture: 'https://w0.peakpx.com/wallpaper/636/801/HD-wallpaper-b-name-alphabet-logo-thumbnail.jpg',
            }
        },
    });
}

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

这是 App.js 文件：

import React, { useEffect } from 'react';
import { StyleSheet, View, PermissionsAndroid, Platform, Text, Alert, TouchableOpacity } from 'react-native';
import { notificationListeners, requestUserPermission } from './src/utils/notificationsServices';
import { Route } from './src/Navigation/Route';
import messaging from '@react-native-firebase/messaging';
import notifee, { AndroidStyle } from '@notifee/react-native';


const App = () => {

  useEffect(() => {
    getDeviceToken();
    const unsubscribeForeground = messaging().onMessage(async remoteMessage => {
      console.log('onMessage from APP.JS REMOTEMESSAGE:', remoteMessage);
      await displayForeGroundNotifications(remoteMessage);
    });
    return () => {
      unsubscribeForeground();
    };
  }, []);

  const getDeviceToken = async () => {
    let token = await messaging().getToken();
    console.log('getToken : ', token);
  }

  const displayForeGroundNotifications = async (remoteMessage) => {

    const channelId = await notifee.createChannel({
      id: 'default',
      name: 'Default Channel',
    });

    await notifee.displayNotification({
      title: remoteMessage?.data.title || 'notifee default Title',
      body: remoteMessage?.data.body || 'notifee default Body',
      android: {
        channelId,
        // smallIcon: 'name-of-a-small-icon', // optional, defaults to 'ic_launcher'.
        // pressAction is needed if you want the notification to open the app when pressed
        pressAction: {
          id: 'default',
        },
        color: '#4caf50',
        actions: [
          {
            title: 'Reply',
            icon: 'https://my-cdn.com/icons/reply.png',
            pressAction: {
              id: 'reply',
            },
            input: true, // enable free text input
          },
          {
            title: 'Archive',
            pressAction: {
              id: 'Archive',
            },
          },
        ],
        style: {
          type: AndroidStyle.BIGPICTURE,
          picture: 'https://w0.peakpx.com/wallpaper/441/746/HD-wallpaper-f-name-alphabet-logo.jpg',
        }
      },
    });
  }

  return (
    <View>
      <TouchableOpacity
        style={{ width: '50%', height: 50, backgroundColor: 'black', justifyContent: 'center', alignItems: 'center' }}
        onPress={() => displayForeGroundNotifications()}>
        <Text style={{ color: 'white' }}> App </Text>
      </TouchableOpacity>
    </View>
  );
};

export default App;

上面我提到了代码文件，因此请提供一些解决方案！..

Answer 1

如果您看到徽章勾选而不是徽章计数，则这与启动器设置有关。我也面临这个问题，当我在三星设备上测试我的通知时，有徽章计数而不是刻度。