Слайдер не двигается с помощью метода onProgress, реагирует на нативный - PullRequest
0 голосов
/ 02 июля 2019

Я играю некоторые аудио-файлы в реагировать родной. Для прогресса аудиофайла (Продолжительность), я показываю ползунок для статуса аудиофайла и для перемотки вперед и назад длительности.

Но, в зависимости от продолжительности звука, он не продолжает перемещать позицию (как таймер).

https://www.npmjs.com/package/react-native-slider

getInfo = async () => {
    try {
      const info = await SoundPlayer.getInfo();
      // console.log('getInfo', info); // {duration: 12.416, currentTime: 7.691}
      const currentTime = get(info, 'currentTime');
      this.setState({ currentDuration: currentTime });
    } catch (e) {
      console.log('There is no song playing', e);
    }
  }
         getProgress = (e) => {
           console.log('getProgress calling');
           this.getInfo();
           this.setState({
            currentTime: this.state.currentDuration,
           });
         }

                <Slider
                  maximumValue={parseFloat(totalLength)}
                  minimumTrackTintColor="color"
                  maximumTractTintColor="color"
                  step={1}
                  value={currentTime}
                  onSlidingComplete={value => this.onValueChange(value)}
                  style={styles.slider}
                  thumbTintColor="red"
                  trackLength={parseFloat(totalLength)}
                // onSlidingStart={() => this.setState({ paused: true })}
                  currentPosition={currentTime}
                  onProgress={e => this.getProgress(e)}
                />

Должен автоматически перемещать значение ползунка в соответствии с длительностью звука

Есть предложения?

1 Ответ

1 голос
/ 04 июля 2019

Вам понадобится счетчик для обновления индикатора выполнения каждую секунду

timer = null;

durationCounter = () => {
  this.timer = setInterval(async () => {
    const info = await SoundPlayer.getInfo();
    this.setState({
      currentTime: info.currentTime
    });
  }, 1000);
};

componentDidMount = () => {
  SoundPlayer.onFinishedLoading(async success => {
    this.durationCounter();
  });
}


componentWillMount = () => {
  this.timer && clearInterval(this.timer);
};
...