在 Expo 应用中添加声音和震动通知-js教程-PHP中文网

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

心靈之曲

发布： 2025-08-22 17:12:18

原创

713人浏览过

在 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(); // 默认震动模式
};

登录后复制

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

人声去除

用强大的AI算法将声音从音乐中分离出来

查看详情

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();
}, []);

登录后复制

代码解释: