import React, { useEffect, useState } from 'react';
import { StyleSheet, Animated, Image } from 'react-native';
import Slider from 'react-native-slider';
import SoundManager from '~/modules/services/sound-manager';
import UI from '~/modules/UI';
const slowImg = require('./img/slow.png');
const quickImg = require('./img/quick.png');
// 控制音频播放速度
function SpeedControl(props) {
const { visible } = props;
const [anim] = useState(new Animated.Value(0));
const [sliderValue, setSliderValue] = useState(SoundManager.getSpeed());
useEffect(
() => {
Animated.timing(anim, {
toValue: visible ? 1 : 0,
duration: 400,
useNativeDriver: true,
}).start();
},
[anim, visible],
);
return (
<Animated.View
style={[
styles.container,
{
opacity: anim.interpolate({
inputRange: [0, 1],
outputRange: [0, 1],
}),
},
]}
>
<Image
source={slowImg}
style={[styles.slowImg, { marginRight: UI.scaleSize(10) }]}
resizeMode="contain"
/>
<Slider
style={styles.slideView}
value={sliderValue}
thumbTintColor={UI.color.primary2}
minimumTrackTintColor={UI.color.primary2}
maximumTrackTintColor={UI.color.text4}
minimumValue={0.5}
maximumValue={1.5}
onValueChange={value => {
setSliderValue(value);
SoundManager.setSpeed(value);
}}
/>
<Image
source={quickImg}
style={[styles.slowImg, { marginLeft: UI.scaleSize(10) }]}
resizeMode="contain"
/>
</Animated.View>
);
}
const styles = StyleSheet.create({
container: {
position: 'absolute',
width: UI.size.deviceWidth - UI.scaleSize(40),
height: UI.scaleSize(65),
left: UI.scaleSize(20),
top: UI.size.statusBarHeight + UI.scaleSize(122),
backgroundColor: UI.color.white,
justifyContent: 'center',
alignItems: 'center',
borderRadius: UI.scaleSize(10),
flexDirection: 'row',
shadowOffset: { width: 0, height: 5 },
shadowOpacity: 0.5,
shadowRadius: 5,
shadowColor: UI.color.black,
elevation: 4,
},
slowImg: {
width: UI.scaleSize(24),
height: UI.scaleSize(24),
},
slideView: {
width: UI.size.deviceWidth - UI.scaleSize(150),
height: UI.scaleSize(16),
},
});
export default SpeedControl;
使用
this.state = {speedControlVisible: false};
onSnapToItem = index => {
this.setState({ speedControlVisible: false });
};
<TouchableOpacity
style={styles.back}
onPress={() => {
this.setState({ speedControlVisible: !speedControlVisible });
}}
>
<SpeedControl
visible={speedControlVisible}
index={index}
setInVisible={() => {
this.setState({ speedControlVisible: false });
}}
/>
