Реагировать на собственный слайдер, не обновляющий прогресс при обновлении состояния - PullRequest
Новая
       40

Реагировать на собственный слайдер, не обновляющий прогресс при обновлении состояния

0 голосов
/ 10 июля 2020

Я использую исходную версию реакции 0.61.5 и реагирую на версию 16.8.3 с собственной подарочной версией чата 0.9.11 для создания небольшого приложение чата. Я хочу отправлять звуковые сообщения. Поэтому я использую библиотеку react-native-audio-recorder-player для записи звука и его воспроизведения. Пока аудиозапись и воспроизведение идут успешно. Теперь я хочу воспроизводить прогресс звуковой дорожки, когда пользователь воспроизводит звук. Я использовал response-native-community / react-native-slider для отображения панели поиска. Так выглядит звуковое сообщение

введите описание изображения здесь

Когда пользователь нажимает кнопку воспроизведения, я хочу показать прогресс звуковой дорожки на этом ползунке. До сих пор я делал это так.

Одаренный компонент чата 

render() {
  return (
    <GiftedChat
      messages={this.state.messages}
      onSend={messages => this.onSend(messages)}
      scrollToBottom={true}
      renderUsernameOnMessage={true}
      renderComposer={this.renderComposer}
      renderBubble={this.renderBubble}
      user={{
        _id: 1,
        name:'You'
      }}
    />
  )
}

компонент renderBubble 

renderBubble = (props) => {
  return(
    <View>
      <View style={{display:'flex',flexDirection:'row'}}>
        <Button iconLeft transparent onPress={this.onStartPlay}>
            <Icon name='ios-play' />
        </Button>
        <Slider
          style={{width: 150, height: 40}}
          minimumValue={0.0000}
          maximumValue={1.0000}
          value={this.state.audioProgress}
          minimumTrackTintColor="#FFFFFF"
          maximumTrackTintColor="#000000"
        />
      </View>
      <Bubble {...props}/>
    </View>
  )
}

функция onStartPlay 

onStartPlay = async () => {
  console.log('onStartPlay');
  const msg = await audioRecorderPlayer.startPlayer('sdcard/test_recording.aac');
  console.log(msg);
  audioRecorderPlayer.addPlayBackListener((e) => {
    if (e.current_position === e.duration) {
      console.log('finished');
      audioRecorderPlayer.stopPlayer();
    }
    this.setState({
      currentPositionSec: e.current_position,
      currentDurationSec: e.duration,
      playTime: audioRecorderPlayer.mmssss(Math.floor(e.current_position)),
      duration: audioRecorderPlayer.mmssss(Math.floor(e.duration)),
    });

    let currentProgress = Math.max(0,  e.current_position) /  e.duration;
    console.log('currentProgress',parseFloat(currentProgress).toFixed(4));
    this.setState({ audioProgress: parseFloat(currentProgress).toFixed(4) });
  });
};

и Я вижу в консоли текущий прогресс обновляется в состоянии audioProgress. И я устанавливаю значение Slider через audioProgress, но положение панели поиска не обновляется. Тестирую на эмуляторе Nexus android.

1 Ответ

0 голосов
/ 10 июля 2020

Я считаю, что вам нужно добавить onValueChange в слайдер. Попробуйте добавить: 

<Slider
          style={{width: 150, height: 40}}
          minimumValue={0.0000}
          maximumValue={1.0000}
          value={this.state.audioProgress}
          onValueChange = {this.state.audioProgress.bind(this)} <===
          minimumTrackTintColor="#FFFFFF"
          maximumTrackTintColor="#000000"
        />

или 

<Slider
          style={{width: 150, height: 40}}
          minimumValue={0.0000}
          maximumValue={1.0000}
          value={this.state.audioProgress}
          onValueChange = {this.state.audioProgress} <===
          minimumTrackTintColor="#FFFFFF"
          maximumTrackTintColor="#000000"
        />

Сообщите мне, работает ли это!

...