Проблема с воспроизведением аудиоклипа и одновременным отображением изображения / текста из массивов в React Native - PullRequest
Новая
       72

Проблема с воспроизведением аудиоклипа и одновременным отображением изображения / текста из массивов в React Native

0 голосов
/ 26 мая 2020

У меня проблема, которую я не могу понять. Я хочу воспроизвести звук, отобразить изображение и отобразить текст из одних и тех же позиций массива в трех разных массивах (ord, images и ljud), где звук, изображение и текст хранятся в соответствующих позициях.

Все работает нормально (отображается изображение, отображается текст и воспроизводится звук). Однако иногда звук и изображение не совпадают при нажатии TouchableOpacity. Я попытался записать в консоль значение imgIndex, и похоже, что функция отображения текста / изображения на один шаг отстает от воспроизведения звука, даже если объект загружается из той же переменной imgIndex. Я не знаю, связано ли это с функцией handlePlaySound или функцией showImageA или чем-то еще. Предупреждение, которое я получаю при первом нажатии на TouchableOpacity, выглядит следующим образом:

«Невозможно загрузить AV-ресурс из нулевого источника воспроизведения»

Похоже, что первое imgIndex значение равно загружается как нулевое значение, даже если оно должно быть 1 или 2?

Я был бы очень рад, если бы кто-нибудь мог указать мне правильное направление, так как я новичок в React Native.

Спасибо ты! 

const ljud = [require('./assets/apa.mp3'),require('./assets/bil.mp3')];

export default class A extends React.Component {
    constructor () { 
        super();
        this.state = {
            showImageA: false,
            imgIndex: ""

        };
      }



ord = ['apa','bil'];
images = [require('./assets/apa.png'),require('./assets/bil.png')];

     displayRandomImage = () => {
      this.setState({
        imgIndex: Math.floor(Math.random() * 2)

      });

          this.setState({showImageA: true});

          setTimeout(() => {
            this.setState({showImageA: false});
            }, 1000);
      }

      handlePlaySound= async note => {

        const soundObject = new Audio.Sound()
        try {
          let source = ljud[note]
          await soundObject.loadAsync(source)
          await soundObject
            .playAsync()
            .then(async playbackStatus => {
              setTimeout(() => {
                soundObject.unloadAsync()
              }, playbackStatus.playableDurationMillis)
            })
            .catch(error => {
              console.log(error)
            })
        } catch (error) {
          console.log(error)
        }
      }



  render() {
    return (

    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <LinearGradient
            colors={['rgba(25,172,255,0.8)', 'cyan']}
            style={{
              position: 'absolute',
              left: 0,
              right: 0,
              top: 0,
              height: 800,
            }}
          />
          <Text style={styles.buttonTextTop}>MAX ABC</Text>
          <Text style={styles.buttonTextVersion}>ver 0.2</Text>

          {this.state.showImageA &&
        <View>
        <Image 
        style={styles.img}
        source={this.images[this.state.imgIndex]} /> 

        <Text 
        style={styles.buttonText}>{this.ord[this.state.imgIndex]} 
        </Text>
        </View>}

              <TouchableOpacity
                  style={[styles.button]}
                onPress={() => {this.displayRandomImage(); this.handlePlaySound(this.state.imgIndex);}}>
            <Text style={styles.buttonText}>A</Text>
              </TouchableOpacity>


    </View>
    );
  }
}
...