react native Slider 使用详解

属性：

View props… ：View的所有属性
disabled：是否禁用 为true时不可滑动
onSlidingComplete：用户结束滑动的时候调用此回调，参数：value
onValueChange ：在用户拖动滑块的过程中不断调用此回调，参数：value
value：滑块的初始值。这个值应该在最小值和最大值之间。默认值是0
step：滑块变化的最小值
minimumValue：滑块的最小值
maximumValue：滑块的最大值

仅IOS支持：

trackImage：滑块图片，只支持本地图片
minimumTrackImage：滑块左侧轨道背景图
maximumTrackImage：滑块右侧轨道背景图

仅android支持：

thumbTintColor:滑块颜色

下面2个属性和文档介绍不同，我是在vivo和华为P9上测试的：

maximumTrackTintColor：真机测试发现ios：滑块右侧区域的颜色。android：滑块左侧区域的颜色
minimumTrackTintColor：真机测试发现ios：滑块左侧区域的颜色。android：滑块右侧区域的颜色

demo：

import React, {Component} from 'react';import {    StyleSheet,    View,    Slider,    Text,} from 'react-native';export default class SliderDemo extends Component {    static navigationOptions = {        title: 'Slider',    };    state = {        value:0,    }    render() {        return (            <View style={{flex:1}}>                <Slider />                <Slider disabled={true}/>                <Slider maximumTrackTintColor='black'/>                <Slider minimumTrackTintColor='red'/>                <Slider style={{borderWidth:1,borderColor:'red'}}/>                <Text>{this.state.value}</Text>                <Slider minimumValue={5} maximumValue={20} onValueChange={(value)=>{this.setState({value:value})}} onSlidingComplete={(value)=>{this.setState({value:value})}}/>                <Slider step={0.2}/>                <Slider thumbImage={require('../../imgs/slider_thumb.png')}/>                <Slider value={0.5}/>            </View>        );    }

效果图：

github下载地址