React Native expo通知未弹出

yv5phkfx  于 2022-11-25  发布在  React
关注(0)|答案(2)|浏览(245)

我尝试编程一个本地通知由博览会,以下代码提供:此处-docs.expo.dev
问题在于:通知简单不出现在我的电话- IOS.当我点击进入按钮,什么都没有发生.
我的App.js文件:

import { StyleSheet, Button, View } from 'react-native';
import * as Notifications from 'expo-notifications';

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

export default function App() {
  function scheduleNotificationHandler() {
    Notifications.scheduleNotificationAsync({
      content: {
        title: 'My first local notification',
        body: 'This is the body of the notification.',
      },
      trigger: {
        seconds: 5
      }
    });
  }

  return (
    <View style={styles.container}>
      <Button
        title="Schedule Notification"
        onPress={scheduleNotificationHandler}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

有人能帮我吗?谢谢你的关注。
我想问题可能出在我的设备的权限上。

unguejic

unguejic1#

我认为问题出在权限上。如果你去这个链接expo_page_notifications,有一个指南可以做到这一点。这是代码:

registerForPushNotificationsAsync = async () => {
 if (Device.isDevice) {
   const { status: existingStatus } = await Notifications.getPermissionsAsync();
   let finalStatus = existingStatus;
   if (existingStatus !== 'granted') {
     const { status } = await Notifications.requestPermissionsAsync();
     finalStatus = status;
   }
   if (finalStatus !== 'granted') {
     alert('Failed to get push token for push notification!');
     return;
   }
   const token = (await Notifications.getExpoPushTokenAsync()).data;
   console.log(token);
   this.setState({ expoPushToken: token });
 } else {
   alert('Must use physical device for Push Notifications');
 }

 if (Platform.OS === 'android') {
   Notifications.setNotificationChannelAsync('default', {
     name: 'default',
     importance: Notifications.AndroidImportance.MAX,
     vibrationPattern: [0, 250, 250, 250],
     lightColor: '#FF231F7C',
   });
 }
};
ijxebb2r

ijxebb2r2#

所以,经过一段时间的研究,我找到了我的问题的答案...

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Button, View } from "react-native";
import * as Notifications from "expo-notifications";
 
Notifications.setNotificationHandler({
  handleNotification: async () => {
    return {
      shouldPlaySound: false,
      shouldSetBadge: false,
      shouldShowAlert: true,
    };
  },
});

//// START: NEWLY ADDED FUNCTIONS ////
const allowsNotificationsAsync = async () => {
  const settings = await Notifications.getPermissionsAsync();
  return (
    settings.granted ||
    settings.ios?.status === Notifications.IosAuthorizationStatus.PROVISIONAL
  );
};
 
const requestPermissionsAsync = async () => {
  return await Notifications.requestPermissionsAsync({
    ios: {
      allowAlert: true,
      allowBadge: true,
      allowSound: true,
      allowAnnouncements: true,
    },
  });
};
//// END: NEWLY ADDED FUNCTIONS ////

export default function App() {
  const scheduleNotificationHandler = async () => {
 
    //// START: CALL FUNCTIONS HERE ////
    const hasPushNotificationPermissionGranted =
      await allowsNotificationsAsync();
 
 
    if (!hasPushNotificationPermissionGranted) {
      await requestPermissionsAsync();
    }
    //// END: CALL FUNCTIONS HERE ////
 
    Notifications.scheduleNotificationAsync({
      content: {
        title: "My first local notification",
        body: "This is th body of the notification.",
        data: { userName: "Max" },
      },
      trigger: {
        seconds: 2,
      },
    });
  };
 
  return (
    <View style={styles.container}>
      <Button
        title='Schedule Notification'
        onPress={scheduleNotificationHandler}
      />
 
      <StatusBar style='auto' />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

相关问题