需要音频进度条，如声音云反应原生

Question

我需要像声音云一样的进度条(指针固定在中间(像这样

我尝试使用反应本机滑块，但无法固定在中心

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

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

前景视图仍位于中心。