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

来,讲这个组件之前,我们先学习一下英文单词,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 给轨道设置一张背景图。只支持静态图片。

实例演示

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

实例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
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);
loonggg wechat
欢迎您扫一扫上面的二维码,订阅我的微信公众号「 非著名程序员」!
坚持原创技术分享,您的支持将鼓励我继续创作!