Expo-AV 出现「Accessed on wrong thread」错误求助

我使用expo-av的Audio模块创建了一个自定义Hook，用于在App内播放背景音乐，并在Home.js中调用playBGM函数。背景音乐可以正常播放，但App中会弹出「Accessed on wrong thread」错误（终端无报错）。已经花费4天时间查找并解决该问题但毫无进展。

使用的包版本 #

"expo": "~51.0.17",
"expo-av": "~14.0.6",
"react": "18.2.0",
"react-native": "0.74.3",

相关代码 #

import { useEffect, useRef } from "react";
import { Audio } from "expo-av";
import { Platform } from "react-native";

const useSoundEffects = () => {
  const soundObjects = useRef({
    start: new Audio.Sound(),
    lost: new Audio.Sound(),
    finish: new Audio.Sound(),
    hint: new Audio.Sound(),
    touch: new Audio.Sound(),
    keypress: new Audio.Sound(),
    bgm: new Audio.Sound(),
  });

  const soundLoaded = useRef({
    start: false,
    lost: false,
    finish: false,
    hint: false,
    touch: false,
    keypress: false,
    bgm: false,
  });

  const loadSound = async (soundObject, soundName, soundFile) => {
    try {
      await soundObject.loadAsync(soundFile);
      soundLoaded.current[soundName] = true;
      if (soundName === "bgm") {
        await soundObject.setIsLoopingAsync(true);
      }
    } catch (error) {
      console.error(`Error loading ${soundName} sound:`, error);
    }
  };

  useEffect(() => {
    const loadSounds = async () => {
      const { start, lost, finish, hint, touch, keypress, bgm } =
        soundObjects.current;

      await loadSound(start, "start", require("../../assets/sounds/start.mp3"));
      await loadSound(lost, "lost", require("../../assets/sounds/lost.mp3"));
      await loadSound(
        finish,
        "finish",
        require("../../assets/sounds/finish.mp3")
      );
      await loadSound(hint, "hint", require("../../assets/sounds/hint.mp3"));
      await loadSound(touch, "touch", require("../../assets/sounds/touch.mp3"));
      await loadSound(
        keypress,
        "keypress",
        require("../../assets/sounds/keypress.mp3")
      );
      await loadSound(bgm, "bgm", require("../../assets/sounds/bgm.mp3"));
    };

    loadSounds();

    return () => {
      Object.values(soundObjects.current).forEach(async (sound) => {
        await sound.unloadAsync();
      });
    };
  }, []);

  const runOnMainThread = (callback) => {
    if (Platform.OS === "ios") {
      callback();
    } else {
      setTimeout(callback, 0);
    }
  };

  const playSound = async (soundName, muteSounds) => {
    if (muteSounds) return;
    try {
      const soundObject = soundObjects.current[soundName];
      if (soundLoaded.current[soundName]) {
        runOnMainThread(async () => {
          await soundObject.replayAsync();
        });
      } else {
        const interval = setInterval(() => {
          if (soundLoaded.current[soundName]) {
            clearInterval(interval);
            runOnMainThread(async () => {
              await soundObject.replayAsync();
            });
          }
        }, 100);
      }
    } catch (error) {
      console.error(`Error playing ${soundName} sound:`, error);
    }
  };

  const playBGM = async () => {
    try {
      const bgm = soundObjects.current.bgm;
      if (soundLoaded.current.bgm) {
        runOnMainThread(async () => {
          await bgm.playAsync();
        });
      } else {
        const interval = setInterval(() => {
          if (soundLoaded.current.bgm) {
            clearInterval(interval);
            runOnMainThread(async () => {
              await bgm.playAsync();
            });
          }
        }, 100);
      }
    } catch (error) {
      console.error("Error playing BGM:", error);
    }
  };

  const stopBGM = async () => {
    try {
      const bgm = soundObjects.current.bgm;
      const status = await bgm.getStatusAsync();
      if (status.isPlaying) {
        runOnMainThread(async () => {
          await bgm.stopAsync();
        });
      }
    } catch (error) {
      console.error("Error stopping BGM:", error);
    }
  };

  return {
    playSound,
    playBGM,
    stopBGM,
  };
};

export default useSoundEffects;

内容的提问来源于stack exchange，提问作者Shesh Narayan Deshmukh