不要显示一个屏幕React Native的通知

Question

我已经编码了一个聊天应用程序，我想防止在某些屏幕上显示推送通知，例如，当两个用户在同一个房间聊天时，通知不会显示给这两个用户，但当有人离开聊天屏幕时，离开的用户会收到推送通知但留在聊天屏幕的用户不会收到通知。我是React Native和Expo Notification服务的新手，我不知道该怎么做？

注意：我可以检测到我在哪个屏幕上。但我不知道我该如何隐藏(例如，我们可以认为2个用户A和B，以及2个聊天室X和Y。如果用户A和用户B在X房间里交谈，那么这两个用户不应该收到推送通知，但当A离开房间，B仍在X房间时，那么只有用户A应该收到推送给通知，而用户B没有收到通知(屏幕

尝试的代码运行良好，但会发出很多相同的通知，直到应用程序崩溃才停止：

const notificationListener = useRef();
useEffect(() => {
notificationListener.current = Notifications.addNotificationReceivedListener(
(notification) => {
// This is how you can get the data from the received notification
const {
room_id,
message_text,
type,
} = notification.request.content.data;
// If we receive a push notification which is not a new message,
// we don't want to display a foreground push notification
// if (type !== "NEW_MESSAGE") {

//   return;
// }
if (room_id === 123) {
console.log("trial");
return;
}
Notifications.scheduleNotificationAsync({
trigger: null,
content: {
title: "A new message",
body: message_text,
},
});
}
);
return () => {
// Unsubscribe when component unmmounts
Notifications.removeNotificationSubscription(
notificationListener.current
);
};
}, []);

Answer 1

根据Expo推送通知文档，Notifications.addNotificationReceivedListener侦听器可以用于您的情况。您可以在聊天室屏幕内订阅此侦听器，并在组件卸载时取消订阅。此外，如果收到的通知针对的是用户当前所在的聊天室屏幕，您可以在订阅内部进行检查

我假设你收到了一个推送通知，有效载荷中有以下数据：

{
room_id: 1,
type: "NEW_MESSAGE"
}

这就是你聊天室屏幕的样子：

import * as Notifications from 'expo-notifications';
const ChatRoomScreen = ({ roomId }) => {
useEffect(() => {
// This listener is fired whenever a notification is received while the app is foregrounded
notificationListener.current = Notifications.addNotificationReceivedListener((notification) => {
// This is how you can get the data from the received notification
const { room_id, message_text, type } = notification?.request?.content?.data ?? {};
// If we receive a push notification which is not a new message,
// we don't want to display a foreground push notification
if (type !== 'NEW_MESSAGE') {
return;
}
// If the user is currently on this screen and the
// room_id from the push notification is the same as on this screen (in other words the roomId prop),
// we don't want to display a foreground push notification
if (room_id === roomId) {
return;
}
// Display a foreground notification here, since the push notification is targeting another chat room
Notifications.scheduleNotificationAsync({
// We're setting the trigger to null since we want the notification to be presented immediately
trigger: null,
content: {
title: 'A new message',
body: message_text,
},
});
});
return () => {
// Unsubscribe when component unmmounts
Notifications.removeNotificationSubscription(notificationListener.current);
};
}, [roomId]);
};

另一种方法是，您可以将当前聊天室id设置为全局状态，然后在handleNotification回调中，您可以检查通知中收到的聊天室id是否与全局状态下的聊天室相同。如果是，请不要显示通知。你可以将你的Notifications.setNotificationHandler更新为这样的东西：

Notifications.setNotificationHandler({
handleNotification: (n) => {
const { room_id } = n?.request?.content?.data ?? {};
// Get the room id from your global state, maybe from redux or similar
const showNotification = room_id !== globalState.roomId;
return new Promise((resolve) =>
resolve({
shouldShowAlert: showNotification,
shouldPlaySound: false,
shouldSetBadge: false,
}),
);
},
});