首页 > 解决方案 > 使用返回时 NavigationEvents 不起作用

问题描述

我正在构建一个小型声音播放器页面。我正在使用 expo-av 库。当用户前进 {NavigationEvents onWillBlur } 正在工作并且当他后退时它没有执行时,我注意到了。

我需要达到的是:1)当用户向后或向前离开页面时停止声音播放。2)如果用户按两次播放,声音将被播放两次,所以如果它已经在运行,我不希望它再次播放

如果可以使用任何其他库来代替 expo-av ?

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; 

标签: react-nativeexpoavaudioplayer

解决方案


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

useEffect(() => { 

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

所以在上面的 useEffect 钩子中,返回的函数将在组件从屏幕上卸载(向前或向后)时运行。

对于第二个问题,您必须禁用播放按钮以避免多次点击。您可以使用useState钩子创建一个状态并使其false在播放按钮单击上并传递此 playButtonState 以禁用播放按钮可触摸不透明度的道具。

我希望你现在清楚了。


推荐阅读