基础篇章:关于 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 给轨道设置一张背景图。只支持静态图片。

实例演示

来,看看效果图大致如下:

实例代码

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

原文发布于微信公众号 - 非著名程序员(non-famous-coder)

原文发表时间:2017-01-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏GIS讲堂

ArcEnbine开发之添加标注

界面比较丑陋,主要控件为: 四个combox,三个textbox和两个按钮,属性值设置在此不详述,还望见谅…… 下面看看实现代码:

13120
来自专栏macOS 开发学习

cocos2d-objc 3.0+ 游戏开发学习手册(二): CCNode 了解

在cocos2d中,CCNode是最基本的显示对象. 在3.0后的新版本中CCNode继承自CCResponder类,可以响应用户的交互事件(点击,触摸等),也...

9120
来自专栏coding for love

CSS入门13-单位详解

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

8820
来自专栏电光石火

HTML条件注释判断浏览器及检验

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> <!--[if IE]> 所有的IE可识别 <![endif]--> ...

44690
来自专栏Python疯子

Python 简单实现标签词云

基于Python的词云生成类库,很好用,而且功能强大.博主个人比较推荐 github:https://github.com/amueller/word_clo...

60610
来自专栏hightopo

基于 HTML5 WebGL 的 3D “弹力”布局

24920
来自专栏hbbliyong

代码创建 WPF 旋转、翻转动画(汇总)

先建立一个button <Button Width="80" Height="60" Content="旋转" Name="trans" Cl...

33540
来自专栏专注数据中心高性能网络技术研发

[Python]Matplotlib绘图基础

1.简介 Matplotlib 是一个 Python 的 2D绘图库,它以各种硬拷贝格式和跨平台的交互式环境生成出版质量级别的图形。 ---- 2.绘图基础 2...

45570
来自专栏PPV课数据科学社区

[V课堂]R语言十八讲(七)

? R的画图功能是非常强大的,这非常有利于数据可视化,对于R画图,我们一 般使用三个画图系统,分别是R自带的画图系统,另外还有两个包,他们的画图功能也很强...

29260
来自专栏林德熙的博客

WPF 在image控件用鼠标拖拽出矩形

今天有小伙伴问我一个问题,在image控件用鼠标拖拽出矩形,本文告诉大家如何使用鼠标画出矩形

17410

扫码关注云+社区

领取腾讯云代金券