【Kevin Learn React Native】--＞ Slider-CFANZ编程社区

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

属性

name	type	desc	platform
disabled	bool	如果为true，用户就不能移动滑块。默认为false。
maximumValue	number	滑块的最大值（当滑块滑到最右端时表示的值）。默认为1。
minimumTrackTintColor	color	滑块左侧轨道的颜色。在iOS上默认为一个蓝色的渐变色。
minimumValue	number	滑块的最小值（当滑块滑到最左端时表示的值）。默认为0。
onSlidingComplete	function	用户松开滑块的时候调用此回调，无论值是否变化。回调值为当前值。
onValueChange	function	在用户拖动滑块的过程中不断调用此回调。
step	number	滑块的步长（拖动变化的最小单元）。这个值应该在0到(maximumValue - minimumValue)之间。默认值为0。
maximumTrackTintColor	color	滑块右侧轨道的颜色。在iOS上默认为一个灰色的渐变色。
value	number	滑块的初始值。这个值应该在最小值和最大值之间。默认值是0。
maximumTrackImage	Image.propTypes.source	指定一个滑块右侧轨道背景图。仅支持静态图片。图片最左边的像素会被平铺直至填满右侧轨道。	iOS
minimumTrackImage	Image.propTypes.source	指定一个滑块左侧轨道背景图。仅支持静态图片。图片最右边的像素会被平铺直至填满左侧轨道。	iOS
thumbImage	Image.propTypes.source	给滑块设置一张图片。只支持静态图片。	iOS
trackImage	Image.propTypes.source	给轨道设置一张背景图。只支持静态图片。图片最中央的像素会被平铺直至填满轨道。	iOS

实例

1. 逻辑代码

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

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      slideValue: 25,
    }
  }
  render() {
    return (
      <View style = {styles.container}>
        <View style={styles.title_view}>
          <Text style={styles.title_text}>
            Slider
          </Text>
        </View>
        <View style={styles.view_layout}>
          <Slider
            style = {styles.slide}
            maximumValue = {100}
            minimumValue = {0}
            step = {1}
            value = {25}
            onSlidingComplete = {(value) => {
              this.setState({slideValue: value})
            }}
          />
          <Text>选择的值是：{this.state.slideValue}</Text>
        </View>
      </View> 
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  title_view:{
    flexDirection:'row',
    height:50,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor:'#27b5ee',
  },
  title_text: {
    fontSize:20,
    color:'white'
  },
  view_layout: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    
    },
  slide: {
    width: 200
  }
});

2. 效果图
【Kevin Learn React Native】--＞ Slider_react native