需要像 soundcloud react-native 这样的音频进度条

Question

我需要 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>
   )

Answer 1

您要查找的不是滑块 - 它只是背景位置的条件渲染。可以这样想：

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 之间的值来渲染这些，则背景 View 将正确偏移。

完成 0% 时，视图将从 left: width / 2 或屏幕中心开始。随着percentComplete 的增加，该偏移量将减少，并在完成 50% 后超出屏幕的左边缘。 100% 时，背景视图的右边缘将位于屏幕的中点。

前景视图保持在中心。