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

loonggg
2,022 阅读2分钟
原文链接： mp.weixin.qq.com

（友情提示：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 给轨道设置一张背景图。只支持静态图片。

实例演示

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

实例代码

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);

由于代码太多，可能阅读代码不是很方便，想要方便的看代码可以点击阅读原文，去博客直接阅读。

特别说明：React Native系列文章，已经发布的我都给大家整理到了一篇索引文章中，方便大家以后集中学习。点击非著名程序员公众号里菜单中的干货资料—>RN 教程即可获得。

avatar
文章
阅读
粉丝