共计 4172 个字符，预计需要花费 11 分钟才能阅读完成。
效果如图：
使用的是 react-native-slider 插件
1、安装
npm i –save react-native-slider
2、具体参数查阅 git 文档
https://github.com/jeanregisser/react-native-slider
3、我们主要讲怎么实现背景图片功能和拖动显示具体值
minimumTrackTintColor={“transparent”}
maximumTrackTintColor={“transparent”}
这两个参数可以使滑块的轨道透明，那么我们只需要给滑块设置一个背景图片就可以了
<ImageBackground
resizeMethod={‘scale’}
style={[styles.imageStyle, {width: this.state.width}]}
source={this.state.sliderBgImg}
imageStyle={{borderRadius: 2}}
>
使用 ImageBackground 标签包裹 Slider 标签添加背景图片最后修改一些 css 就可以实现了
具体代码封装组件 slider-widget.js
/**
* 用法
* 1. 默认用法，不传递任何参数，就是默认主题颜色
* 2. 如果想要使用背景图片，必须设置三个参数
* bgImage={require(“./p.jpeg”)} 背景图片
* minColor={“transparent”} 左边轨道颜色透明
* maxColor={“transparent”} 右边轨道颜色颜色透明
*/
import React, {Component} from “react”;
import {View, Text, Dimensions, StyleSheet, ImageBackground} from “react-native”;
import Slider from “react-native-slider”;
export default class SliderWidget extends Component {
constructor(props) {
super(props);
this.state = {
initSliderValue: this.props.value ? this.props.value : 0, // 初始化值
maxValue: this.props.maxValue ? this.props.maxValue : 100, // 滑块最大值
minValue: this.props.minValue ? this.props.minValue : 0, // 滑块最小值
step: this.props.step ? this.props.step : 0, // 步调
width: this.props.width ? this.props.width : Dimensions.get(“window”).width – 20, // 设备宽度
showFloat: false, // 拖动的时候上面显示值
minColor: this.props.minColor ? this.props.minColor : “#c53c2c”, // 左边的轨迹颜色
maxColor: this.props.maxColor ? this.props.maxColor : “#dddddd”, // 右边的轨迹颜色
sliderBgImg: this.props.bgImage // 轨迹北京图片
}
}
componentWillMount() {
}
render() {
return(
<View>
<ImageBackground
resizeMethod={‘scale’}
style={[styles.imageStyle, {width: this.state.width}]}
source={this.state.sliderBgImg}
imageStyle={{borderRadius: 2}}
>
{this.state.showFloat ?
<View style={[styles.floatValue, {left: this.state.initSliderValue / this.state.maxValue * this.state.width – (this.state.initSliderValue * this.state.maxValue / this.state.width)}]}><Text>{this.state.initSliderValue}</Text></View>
: <View></View>
}
<Slider
style={[styles.silder, {width: this.state.width}]}
maximumValue={100}
minimumValue={0}
step={1}
value={this.state.initSliderValue}
onValueChange={this.onValueChangeFun}
onSlidingComplete={this.onSlidingCompleteFun}
minimumTrackTintColor={this.state.minColor}
maximumTrackTintColor={this.state.maxColor}
// thumbImage={this.state.sliderBgImg}
thumbTintColor={“#ffffff”}
thumbStyle={{width: 30, height: 30, overflow: “hidden”, borderRadius: 30, shadowColor: “#aaaaaa”, shadowOffset: {width: 4, height: 4}, shadowOpacity: 0.8, shadowRadius: 4, elevation: 4, opacity: 1}}
>
</Slider>
</ImageBackground>
</View>
);
}
componentDidMount() {
}
componentWillUnmount() {
}
// 拖动事件
onValueChangeFun = (event) => {
console.log(event, “ 改变事件 ”);
this.setState({
initSliderValue: event,
showFloat: true
});
}
// 拖动完成事件
onSlidingCompleteFun = (event) => {
this.setState({
showFloat: false
});
this.props.getSliderValue(event);
}
}
const styles = StyleSheet.create({
silder: {
position: “absolute”,
top: -18,
left: 0
},
imageStyle: {
height: 4,
marginTop: 35,
marginBottom: 15,
borderRadius: 2,
position: “relative”
},
floatValue: {
width: 30,
height: 20,
borderRadius: 5,
backgroundColor: “#fff”,
borderWidth: 1,
borderColor: “#dddddd”,
position: “absolute”,
top: -35,
left: 0,
alignItems: “center”,
justifyContent: “center”
}
})
使用组件 app.js
import React, {Component} from ‘react’;
import {StyleSheet, Text, View} from ‘react-native’;
import SliderWidget from ‘./slider-widget’;
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
sliderValue: 50,
sliderBgValue: 30
}
}
render() {
return (
<View style={styles.container}>
<Text> 亮度: {this.state.sliderValue}%</Text>
<SliderWidget value={this.state.sliderValue} getSliderValue={this.showSliderValueFun}></SliderWidget>
<Text> 色温: {this.state.sliderBgValue}%</Text>
<SliderWidget value={this.state.sliderValue} getSliderValue={this.showSliderBgValueFun} bgImage={require(“./p.jpeg”)} minColor={“transparent”} maxColor={“transparent”}></SliderWidget>
</View>
);
}
// 获取颜色值
showSelectColorRgbFun = (color) => {
console.log(color);
}
// 获取 slider 值
showSliderValueFun = (value) => {
console.log(value);
this.setState({
sliderValue: value
})
}
showSliderBgValueFun = (value) => {
console.log(value);
this.setState({
sliderBgValue: value
})
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#F5FCFF’,
},
welcome: {
fontSize: 20,
textAlign: ‘center’,
margin: 10,
},
instructions: {
textAlign: ‘center’,
color: ‘#333333’,
marginBottom: 5,
},
});
