React-Native Slider滑竿使用

Slider用于选择一个范围值的组件

效果：

39BFFBD7-299A-4A2F-B849-17A1362FBAF6.png

属性：

minimumValue：滑块的最小值（当滑块滑到最左侧时表示的值），默认为0
maximumValue：滑块的最大值（当滑块滑到最右端时表示的值），默认为1
value：滑块的初始值。这个值应该在最小值和最大值之间，默认值是0
onValueChange：在用户拖动滑块的过程中不断调用此回调，携带一个当前滑块的位置参数
onSlidingComplete：户结束滑动的时候调用此回调
step：滑块的最小步长，这个值应该在0到(maximumValue - minimumValue)之间，默认值为0
thumbImage：给滑块设置一张图片，只支持静态图片
trackImage：给轨道设置一张背景图，只支持静态图片，图片最中央的像素会被平铺直至填满轨道
minimumTrackImage：指定一个滑块左侧轨道背景图，仅支持静态图片。图片最右边的像素会被平铺直至填满轨道
maximumTrackImage：指定一个滑块右侧轨道背景图，仅支持静态图片。图片最左边的像素会被平铺直至填满轨道
minimumTrackTintColor：滑块左侧轨道的颜色，默认为一个蓝色的渐变色
maximumTrackTintColor：滑块右侧轨道的颜色，默认为一个灰色的渐变色

上面效果用到的图片，是我随便切的

创建一个Slider：

完整事例：

import React, {
    Component
} from 'react';

import {
    AppRegistry,
    StyleSheet,
    Slider,
    View,
    Text
} from 'react-native';

class SliderView_1 extends Component {
    constructor(props){
        super(props);
        this.state={
            value: 20
        }
    }

    _onChange =(value)=>{
        this.setState({
            value: value
        })
    };
    render(){
        return(
            
                
                
                    当前选择的value：{this.state.value}
                
            
        )
    }
}
class SliderView_2 extends Component {
    constructor(props){
        super(props);
        this.state={
            value: 20
        }
    }
    _onChange =(value)=>{
        this.setState({
            value: value
        })
    };
    _complete =()=>{
        alert('finish')
    };
    render(){
        return(
            
                
                    设置了trackImage背景图和thumbImage滑块的图
                
                
                
                    设置了minimumTrackImage最小值的图和maximumTrackImage最大值的图
                
                
                
                    当前选择的value：{this.state.value}
                
            
        )
    }
}
class SliderView_3 extends Component {
    render(){
        return(
            
                
                    设置Slider的disabled为true，不可交互
                
                
            
        )
    }
}
export default class RNSliderView extends Component{
    render(){
        return(
            
                
                
                
            
        )
    }
}
const styles = StyleSheet.create({
    mainView:{
        flex: 1,
        backgroundColor: '#aaaaaa',
        alignItems: 'center'
    },
    subView: {
        backgroundColor: '#ffffff',
        marginTop: 30,
        padding: 10,
        borderRadius: 5,
        alignItems: 'center',
        width: 320
    },
    slider: {
        width: 280,
        marginTop: 20
    },
    text: {
        marginTop: 20
    }
});
AppRegistry.registerComponent('RNSliderView', ()=>RNSliderView);