Question

阅读世博会文件：

对于iOS，您最好处理推送通知应用程序被预先接收时收到，因为否则用户永远不会见到他们。应用程序到达时发出的通知 iOS上的预设不会显示在系统通知列表中。一个常见的解决方案是手动显示通知。对于例如，如果您在Messenger for iOS上收到消息，请使用该应用程序有前途，但没有那个对话打开，你会看到通知使用自定义从屏幕顶部向下滑动通知UI。

我不明白最好的方法是什么？是否有用于显示此类消息的Expo API？或者我应该创建自己的警报组件？文档中并不是很清楚。

感谢。

Answer 1

没有用于显示这些消息的Expo API。您可以使用您选择的任何“Toast”库并显示通知消息，但这应该是您的所有代码。

例如，这就是我们现在正在做的事情：

export default class HomeScreen extends React.Component {

  componentDidMount() {
    this.notificationSubscription = Notifications.addListener(
      (notification) => this.handlePushNotification(notification),
    );
  }

  handlePushNotification(notification) {
    const { navigation } = this.props;
    PushNotificationsService.handleNotification(notification, navigation);
  }

（...）

import Toast from 'react-native-root-toast';

export default class PushNotificationsService {

  static handleNotification(notification, navigation) {

    if (notification.data.screen && notification.origin === 'selected') {
      navigation.navigate(notification.data.screen);
    }
    Toast.show(notification.data.message);
  }

}

Toast库包括：

Answer 2

App.json：

{
  "expo": {
    "notification": {
      "iosDisplayInForeground": true
    }
}

Answer 3

现在您只需将其添加到您的应用入口点之一即可。 shouldShowAlert 正是您想要的

import * as Notifications from 'expo-notifications';

Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: false,
    shouldSetBadge: false,
  }),
});

Answer 4

DEMO

我不确定何时将其添加到Expo中，但是从Expo 36版本开始是否容易实现。

要在您的应用程序处于前台时在iOS上显示Expo Push Notifications，请执行以下操作：


import { Vibration } from "react-native";  
import { Notifications } from "expo";  
import * as Permissions from "expo-permissions";  
import Constants from "expo-constants";

registerForPushNotificationsAsync = async () => {                          
  if (Constants.isDevice) {                                                
    const { status: existingStatus } = await Permissions.getAsync(         
      Permissions.NOTIFICATIONS                                            
    );                                                                     
    let finalStatus = existingStatus;                                      
    if (existingStatus !== "granted") {                                    
      const { status } = await Permissions.askAsync(                       
        Permissions.NOTIFICATIONS                                          
      );                                                                   
      finalStatus = status;                                                
    }                                                                      
    if (finalStatus !== "granted") {                                       
      alert("Failed to get push token for push notification!");            
      return;                                                              
    }                                                                      
    let token = await Notifications.getExpoPushTokenAsync();
    console.log("Go to https://expo.io/notifications and copy the token below to easily send yourself a notification.");
    console.warn("Notifications on iOS (and I believe Android) ONLY WORK ON A PHYSICAL DEVICE, not a simulator or emulator!!!")               
    console.log(token);                                                    
    this.setState({ expoPushToken: token });                               
  } else {                                                                 
    alert("Must use physical device for Push Notifications");              
  }                                                                        
};                                                                         

componentDidMount() {                                                      
  this.registerForPushNotificationsAsync();                                                
  this._notificationSubscription = Notifications.addListener(              
    this._handleNotification                                               
  );                                                                       
}

_handleNotification = async notification => {                                                                                    
  if (notification.remote) {
    Vibration.vibrate();                                                  
    const notificationId = Notifications.presentLocalNotificationAsync({      
      title: "Follow @technoplato",  
      body: "To learn yourself goodly (also follow PewDiePie)",                                             
      ios: { _displayInForeground: true } // <-- HERE'S WHERE THE MAGIC HAPPENS                                
    });                                                                       
  }                                                   
};

快速简便的健全性检查

1）转到此处：https://expo.io/notifications

2）运行应用程序时，将输出的令牌复制到终端。

3）在iOS上打开您的应用程序。

4）从https://expo.io/notifications向您发送通知，并注意即使您的应用程序处于前台状态，该通知也会显示。

注释

在iOS模拟器上将不会收到通知
Expo使通知变得异常容易。老实说，我不敢相信。

不知道为什么displayInForeground在默认情况下是假的，而在文档中没有突出显示。如果可以的话，我将提交其PR。

此小吃中最初找到的代码：https://snack.expo.io/@documentation/pushnotifications?platform=ios

LocalNotification.ios._displayInForeground 在这里找到：https://docs.expo.io/versions/v36.0.0/sdk/notifications/#localnotification

应用程序处于前台时，IOS Expo推送通知

4 个答案: