带有异步功能的useEffect不能播放声音
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了带有异步功能的useEffect不能播放声音相关的知识,希望对你有一定的参考价值。
我试图在HomeScreen加载后立即在React Native / Expo应用程序中播放背景音乐。
[使用expo AV库,我用一种启动音乐的方法设置了MusicContext。这是我的MusicContext.js
import React, {
useState,
useCallback,
useMemo,
useContext,
useEffect,
} from "react"
import PropTypes from "prop-types"
import { Audio } from "expo-av"
const initialState = {
playMusic: false,
setPlayMusic: () => null,
}
export const MusicContext = React.createContext(initialState)
const startMusic = async () => {
let mainTheme = null
if (!mainTheme) {
mainTheme = new Audio.Sound()
try {
console.log("trying")
await mainTheme.loadAsync(require("../assets/sounds/MainTheme.mp3"))
mainTheme.setStatusAsync({ isLooping: true })
} catch (error) {
console.log("Couldnt load main theme")
return
}
}
}
export const MusicProvider = props => {
const [playMusic, setPlayMusic] = useState(initialState.playMusic)
return (
<MusicContext.Provider
value={{
playMusic,
setPlayMusic,
startMusic,
}}
>
{props.children}
</MusicContext.Provider>
)
}
MusicContext.propTypes = {
children: PropTypes.node.isRequired,
}
然后我在主屏幕上的startMusic
中调用useEffect
方法。
const HomeScreen = () => {
const { startMusic } = useContext(MusicContext)
useEffect(() => {
console.log("running")
startMusic()
}, [])
我看到了所有console.log输出,所以我知道它正在运行,但是音乐永远不会播放。我在这里想念什么?
答案
是否有没有将startMusic
放在initialState
中的原因?
将函数放入initalState
时,将正确调用它。
为了更广泛地回答您的问题,您需要将aysnc函数包装在IIFE中,或者将其作为单独的被调用函数。
我通常以IIFE包装。
以上是关于带有异步功能的useEffect不能播放声音的主要内容,如果未能解决你的问题,请参考以下文章