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：

<Slider style={{width: 280}}
                        minimumValue={0}
                        maximumValue={100}
                        value={50}
 />

完整事例：

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(
            <View style={styles.subView}>
                <Slider style={styles.slider}
                        minimumValue={0}
                        maximumValue={100}
                        value={this.state.value}
                        onValueChange={this._onChange}/>
                <Text style={styles.text}>
                    当前选择的value：{this.state.value}
                </Text>
            </View>
        )
    }
}
class SliderView_2 extends Component {
    constructor(props){
        super(props);
        this.state={
            value: 20
        }
    }
    _onChange =(value)=>{
        this.setState({
            value: value
        })
    };
    _complete =()=>{
        alert('finish')
    };
    render(){
        return(
            <View style={styles.subView}>
                <Text style={styles.text}>
                    设置了trackImage背景图和thumbImage滑块的图
                </Text>
                <Slider style={styles.slider}
                        minimumValue={10}
                        maximumValue={190}
                        step={10}
                        value={30}
                        minimumTrackTintColor={'#1ff000'}
                        maximumTrackTintColor={'#f010ff'}
                        onSlidingComplete={this._complete}
                        trackImage={require('./image/r11.png')}
                        thumbImage={require('./image/t11.png')}/>
                <Text style={styles.text}>
                    设置了minimumTrackImage最小值的图和maximumTrackImage最大值的图
                </Text>
                <Slider  style={styles.slider}
                         minimumValue={0}
                         maximumValue={100}
                         value={50}
                         step={10}
                         onValueChange={this._onChange}
                         minimumTrackImage={require('./image/q11.png')}
                         maximumTrackImage={require('./image/t11.png')}
                         thumbTintColor={'#aafaff'}//只在安卓有效
                />
                <Text style={styles.text}>
                    当前选择的value：{this.state.value}
                </Text>
            </View>
        )
    }
}
class SliderView_3 extends Component {
    render(){
        return(
            <View style={styles.subView}>
                <Text style={styles.text}>
                    设置Slider的disabled为true，不可交互
                </Text>
                <Slider style={styles.slider}
                        minimumValue={0}
                        maximumValue={100}
                        value={30}
                        minimumTrackTintColor={'#1ff000'}
                        maximumTrackTintColor={'#f010ff'}
                        onSlidingComplete={this._complete}
                        disabled={true}
                        thumbImage={require('./image/q11.png')}
                />
            </View>
        )
    }
}
export default class RNSliderView extends Component{
    render(){
        return(
            <View style={styles.mainView}>
                <SliderView_1/>
                <SliderView_2/>
                <SliderView_3/>
            </View>
        )
    }
}
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);