react native拖动上方显示值，改变背景颜色的slider

效果如图：使用的是react-native-slider插件1、安装npm i –save react-native-slider2、具体参数查阅git文档https://github.com/jeanregisser/react-native-slider3、我们主要讲怎么实现背景图片功能和拖动显示具体值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.jsimport 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, },});