React native 使用返回时NavigationEvents不工作

我正在建立一个小的声音播放器页面。我正在使用世博影音图书馆。 当用户向前{NavigationEvents onWillBlur}工作时，我被注意到，当他向后时，它不会执行

我需要达到的是： 1） 当用户向后或向前离开页面时，停止播放声音。 2） 如果用户按两次播放，声音将播放两次，因此如果声音已经运行，我不希望再次播放

是否有其他图书馆可以代替世博影音

import React, {useState} from 'react';
import {View, Text, Button, StyleSheet, TouchableOpacity } from 'react-native';
import { NavigationEvents } from 'react-navigation';
import { Audio } from 'expo-av';
import {AntDesign, Entypo} from '@expo/vector-icons';




const PlaySound =  ({link}) => {

    const [error, setError] = useState('')

    const soundObject = new Audio.Sound();

    const mySound = async () => {

        try {
         await soundObject.loadAsync({ uri : link });
         await soundObject.playAsync();

       } catch (err) {
           setError('Wait while uploading your sound');
       }

    }

    const stopSound = async () => {
        try {
            await soundObject.stopAsync(mySound);
        } catch (error) {
           setError('You must Play Sound First')
        }

    }

    const pause = async () => {
        try {
            await soundObject.pauseAsync(mySound);
        } catch (error) {
            setError('Something went wrong !!! Please try again');
        }
    }

    return (
        <View>
            <NavigationEvents onWillBlur = {stopSound} />
            <Text>Play Sound</Text>
            <View style = {styles.row}>
            <TouchableOpacity
            onPress = {mySound}>
                <AntDesign name = 'caretright' size = {25} />
            </TouchableOpacity>
            <TouchableOpacity
            onPress = {stopSound} >
                <Entypo name = 'controller-stop' size = {25}/>
            </TouchableOpacity>
            <TouchableOpacity
            onPress = {pause}>
                <AntDesign name = 'pause' size = {25} />
            </TouchableOpacity>
            </View>
            {error ? <Text>{error} </Text> : null }
        </View>
    );
};



const styles = StyleSheet.create({
    row : {
        flexDirection : 'row',
        justifyContent : 'space-between',
        marginVertical : 10
    }
});


export default PlaySound; 

import React，{useState}来自“React”；
从“react native”导入{视图、文本、按钮、样式表、TouchableOpacity}；
从“react navigation”导入{NavigationEvents}；
从“expo av”导入{Audio}；
从“@expo/vector icons”导入{AntDesign，Entypo}；
常量播放声音=（{link}）=>{
const[error，setError]=useState（“”）
const soundObject=新的Audio.Sound（）；
const mySound=async（）=>{
试一试{
wait soundObject.loadAsync（{uri:link}）；
等待soundObject.PlaySync（）；
}捕捉（错误）{
setError（“上传声音时等待”）；
}
}
const stopSound=async（）=>{
试一试{
等待soundObject.stopAsync（mySound）；
}捕获（错误）{
setError（'必须先播放声音'）
}
}
const pause=async（）=>{
试一试{
wait soundObject.pauseAsync（mySound）；
}捕获（错误）{
setError（'出现问题！！！请重试'）；
}
}
返回(
播放声音
{error？{error}:null}
);
};
const styles=StyleSheet.create({
行：{
flexDirection:'行'，
justifyContent:'之间的空间'，
利润率：10
}
});
导出默认播放声音；

针对问题1，当用户离开页面时，您必须停止播放机。您可以使用useEffect挂钩。会是这样的,

useEffect(() => { 

   return () => {
     stopSound();
  }
}, []); 

所以在上面的useEffect钩子中，当组件从屏幕上卸载时（向前或向后），返回的函数将运行

对于第二个问题，您必须禁用播放按钮以避免多次单击。您可以使用

useState

hook创建状态，并在播放按钮上单击并传递此播放按钮状态以禁用播放按钮可触摸不透明度的道具

---

我希望你现在明白了。

问题是关于航行事件的。