Требуется индикатор выполнения звука, такой как Soundcloud React-native - PullRequest
Новая
       112

Требуется индикатор выполнения звука, такой как Soundcloud React-native

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

Мне нужен индикатор выполнения, такой как soundcloud (указатель зафиксирован в центре) Like This

Я пробовал с React Native Slider , но не смог исправить в центре 


function TrackProgres() {  
  const bufferedPosition = 0
  const duration = 600

  return (    
    <ScrollView horizontal={true}>
      <ImageBackground source={require('../../../../assets/images/sound.png')} style={{width:550, height: 40,zIndex:-1,left: 50,marginRight: -50 }} imageStyle={{resizeMode: 'repeat'}}>
        <Slider 
          style={{width: 550}}
          value={bufferedPosition}
          maximumValue={duration}
          minimumTrackTintColor="#292b2c"
          maximumTrackTintColor="#292b2c"
          thumbStyle={styles.thumb}
          trackStyle={styles.track}
          onValueChange={(value) => seekTo(value)}
            /> 
    </ImageBackground> 
    </ScrollView>
   )

1 Ответ

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

То, что вы ищете, не является слайдером - это просто условный рендеринг на заднем фоне. Подумайте об этом так: 

const { width } = Dimensions.get('window');

return (
    <View
        style={{
            position: 'absolute',
            height: 30,
            width,
            top: 0,
            left: (width / 2) - (width * percentComplete),
            backgroundColor: '#F00',
        }}
    >
        <View
            style={{
                 position: 'absolute',
                 backgroundColor: '#FFF',
                 top: 0,
                     left: (width / 2) - 1,
                 width: 2,
                 height: 30,
            }}
        />
    </View>
);

Если вы визуализируете их с percentComplete как значение от 0 до 1, фоновый вид будет смещен правильно.

При завершении 0%, Просмотр начнется с left: width / 2 или в центре экрана. По мере увеличения percentComplete это смещение будет уменьшаться и go за левым краем экрана после 50% завершения. При 100% правый край фонового обзора будет посередине экрана.

Вид переднего плана остается в центре.

...