React Native 交互组件之 Slider

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

属性

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. 效果图

slide_demo.jpg