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

效果如图：

使用的是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,
  },
});