NavigationEvents не работает при использовании, возвращаясь - PullRequest
Новая
       21

NavigationEvents не работает при использовании, возвращаясь

0 голосов
/ 06 апреля 2020

Я создаю небольшую страницу звукового плеера. Я использую библиотеку 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;

1 Ответ

0 голосов
/ 07 апреля 2020

Для задачи 1, в которой вы должны остановить игрока, когда пользователь покидает страницу. Вы можете использовать крючок useEffect. Это будет что-то вроде этого, 

useEffect(() => { 

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

Так что в описанном выше хуке useEffect возвращаемая функция будет запущена, когда компонент размонтируется с экрана (вперед или назад).

Для 2-й задачи , вы должны отключить кнопку воспроизведения, чтобы избежать нескольких кликов. Вы можете создать состояние, используя useState hook, и сделать его false при нажатии кнопки Play и передать значение playButtonState, чтобы отключить поддержку непрозрачности Play Button.

Надеюсь, теперь вам все ясно.

...