react native拖動上方顯示值，改變背景顏色的slider

zxc19890923發表於2019-04-01
React NativeIDE

效果如圖：
clipboard.png

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

相關文章