基础篇章：关于 React Native 之 Slider 组件的讲解

（友情提示：RN学习，从最基础的开始，大家不要嫌弃太基础，会的同学请自行略过，希望不要耽误已经会的同学的宝贵时间）

来，讲这个组件之前，我们先学习一下英文单词，Slider ，来跟我一起读：Slider ，哈哈……不逗你们了，slider 是滑块的意思，翻译完，大家就应该知道这个组件的功能和作用了吧？就是一个滑动选择范围中的一个值的组件。

Slider 属性

照例，老样子，在使用之前，看看这个组件的相关属性。如下：

• disabled bool 如果是true的话，Slider 组件将不能够滑动，默认是false
• maximumValue number 我们知道这个组件是一个滑动选择范围的组件，所以这个属性的意思是设置滑块初始的最大值，默认值是1
• minimumValue number 设置滑动初始的最小值，默认值是0
• onSlidingComplete func 当用户完成滑块滑动的时候，回调这个函数，比如：当滑块被释放的时候调用
• onValueChange func 当用户正在拖拽滑动滑块的时候连续回调这个函数
• step number 滑块的步值，这个值在0和最小值与最大值之间，默认值是0
• value number 滑块的初始值，这个值在最小值和最大值范围之间
• maximumTrackImage ios 指定一个最大的轨道图像。只有静态图像的支持。图像的最左边的像素将被拉伸以填充轨道。
• maximumTrackTintColor ios 用于轨道的按钮右侧的颜色。覆盖默认的蓝色渐变图像
• minimumTrackImage ios 分配的最小轨道的图像。只有静态图像的支持。图像的最右边的像素将被拉伸以填充轨道。
• minimumTrackTintColor ios 用于轨道的按钮的左边的颜色。覆盖默认的蓝色渐变的图像。
• thumbImage ios 给滑块设置一张图片。只支持静态图片。
• trackImage ios 给轨道设置一张背景图。只支持静态图片。

实例演示

来，看看效果图大致如下：

实例代码

代码语言：javascript复制

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

export default class SliderDemo extends Component {
  state = {
    slideCompletionValue: 50,
  };
  render() {
    return (
      <View style={styles.container}>
        <Slider 
        style={{width:200}}
        maximumValue={100}
        minimumValue={0}
        step={1}
        value={50}
        onSlidingComplete={(value)=>this.setState({slideCompletionValue:value})}
        >
        </Slider>
        <Text>选择的值：{this.state.slideCompletionValue}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

AppRegistry.registerComponent('SliderDemo', () => SliderDemo);

reactnative android

0 人点赞