在 Expo 应用中添加声音和震动通知-小浪学习网

在 Expo 应用中添加声音和震动通知

正如摘要所述，本文将指导你如何在 Expo 应用中集成声音和震动通知，以增强用户体验。我们将探讨如何使用 expo-av 和 react-native 提供的 Vibration API 实现这些功能，并重点关注权限处理和正确触发通知的时机。

集成声音通知

要实现声音通知，我们需要使用 expo-av 库。首先，确保你已经安装了该库：

npx expo install expo-av

以下是一个基本示例，展示了如何在收到通知时播放声音：

import { useEffect } from "react"; import * as Notifications from "expo-notifications"; import { Alert } from "react-native"; import React from "react"; import { useNavigation } from "@react-navigation/native"; import { Audio } from 'expo-av';  Notifications.setNotificationHandler({   handleNotification: async () => {     return {       shouldPlaySound: true,       shouldSetBadge: false,       shouldShowAlert: true,     };   }, });  const HandleNotifications = () => {   const navigation = useNavigation();    useEffect(() => {     async function configurePushNotifications() {       const { status } = await Notifications.getPermissionsAsync();       let finalStatus = status;       if (finalStatus !== "granted") {         const { status } = await Notifications.requestPermissionsAsync();         finalStatus = status;       }       if (finalStatus !== "granted") {         Alert.alert(           "Permiso requerido",           "Se requieren notificaciones locales para recibir alertas cuando vencen los recordatorios."         );         return;       }     }      configurePushNotifications();   }, []);    useEffect(() => {     const subscription = Notifications.addNotificationResponseReceivedListener(       (response) => {         console.log("RESPONSE", response);         const reminderId = response.notification.request.content.data.reminderId;         if (reminderId) {           navigation.navigate("ModifyReminder", { reminderId });         }       }     );      return () => subscription.remove();   }, []);    useEffect(() => {     let soundObject = null;      async function playSound() {       soundObject = new Audio.Sound();       try {         await soundObject.loadAsync(require('../assets/sonido.mp3'));         await soundObject.playAsync();       } catch (error) {         console.log(error);       }     }      playSound();      return () => {       if (soundObject) {         soundObject.stopAsync();         soundObject.unloadAsync();       }     };   }, []);    useEffect(() => {     const appFocusSubscription = Notifications.addNotificationResponseReceivedListener(() => {       Audio.setIsEnabledAsync(false);     });      const appBlurSubscription = Notifications.addNotificationResponseReceivedListener(() => {       Audio.setIsEnabledAsync(true);     });      return () => {       appFocusSubscription.remove();       appBlurSubscription.remove();     };   }, []);    return <React.Fragment />; };  export default HandleNotifications;

代码解释:

导入必要的模块: 导入 Audio 来自 expo-av 和 Notifications 来自 expo-notifications.
设置通知处理程序: 使用 Notifications.setNotificationHandler 配置通知的处理方式，确保 shouldPlaySound 设置为 true。
加载声音文件: 使用 Audio.Sound.createAsync 加载你的声音文件 (例如 sonido.mp3)。
播放声音: 创建一个 playSound 函数，使用 soundObject.playAsync() 播放声音。确保在组件卸载时停止并卸载声音对象，以避免内存泄漏。
解决声音循环播放问题: 使用 Audio.setIsEnabledAsync 在应用获得焦点和失去焦点时控制声音的播放，避免声音在应用打开时持续播放。

注意事项:

确保你的声音文件路径正确。
检查设备是否允许应用播放声音。
处理异步操作的错误，例如声音文件加载失败。

集成震动通知

要实现震动通知，可以使用 react-native 提供的 Vibration API。首先，确保你已经导入了该库：

import { Vibration } from 'react-native';

以下是一个基本示例，展示了如何在收到通知时触发震动：

import { Vibration } from 'react-native';  // 在收到通知时触发震动 const handleNotification = () => {   Vibration.vibrate(); // 默认震动模式 };

你也可以自定义震动模式：

import { Vibration } from 'react-native';  // 自定义震动模式 const handleNotification = () => {   const pattern = [0, 500, 200, 500]; // 停止 0ms, 震动 500ms, 停止 200ms, 震动 500ms   Vibration.vibrate(pattern); };

代码解释:

导入 Vibration: 导入 Vibration 来自 react-native.
触发震动: 使用 Vibration.vibrate() 触发震动。你可以使用默认震动模式，也可以自定义震动模式。

注意事项:

某些设备可能不支持震动功能。
过度使用震动可能会影响用户体验。

权限处理

在 android 设备上，你需要确保应用具有播放声音和震动的权限。通常情况下，Expo 会自动处理这些权限，但如果遇到问题，可以手动请求权限：

import * as Permissions from 'expo-permissions';  async function requestPermissions() {   const { status } = await Permissions.askAsync(Permissions.AUDIO_RECORDING, Permissions.NOTIFICATIONS);   if (status !== 'granted') {     Alert.alert('权限不足', '请在设置中授予应用声音和通知权限。');   } }  useEffect(() => {   requestPermissions(); }, []);

代码解释: