用于从一个值范围选择一个值的组件。
一、属性
|
类型
|
说明
|
|
| disabled | bool | 如果为true，用户无法移动这个滑动条。默认值为false。 |
| maximumValue | number | 滑动条最大值。默认为1。 |
| minimumValue | 滑动条最小值，默认为0。 | |
| onSlidingComplete | function | 当用户完成值的改变被回调的方法。 |
| onValueChange | 当用户正在滑动滑动条持续回调的方法； | |
| step | 滑动条的最小单位。这个值应该在0到最大值-最小值之间。默认为0。 | |
| testID | string | |
| value | 滑动条选择的值。这个值应该在最小值和最大值之间，它们的默认值分别为0和1。默认值为0。 |
二、实例
index.andorid.js文件
'use strict';
var React = require('react');
var ReactNative = require('react-native');
var {
AppRegistry,StyleSheet,View,Text,Slider,} = ReactNative;
var SliderExample = React.createClass({
getDefaultProps: function(){
return {
value: 0,};
},getInitialState: function(){
return {
value: 0,render: function(){
return (
<View>
<Text style={styles.text}>
{this.state.value && +this.state.value.toFixed(3)}
</Text>
<Slider
{...this.props}
onValueChange={(value) => this.setState({value: value})} />
</View>
);
},});
var SlidingCompleteExample = React.createClass({
getInitialState: function(){
return {
slideCompletionValue: 0,slideCompletionCount: 0,render: function() {
return (
<View>
<SliderExample
{...this.props}
onSlidingComplete={(value) => this.setState({
slideCompletionValue: value,slideCompletionCount: this.state.slideCompletionCount + 1})} />
<Text>
Completions: {this.state.slideCompletionCount} Value: {this.state.slideCompletionValue}
</Text>
</View>
);
}
});
var AwesomeProject = React.createClass({
render: function(){
return(
<View>
<SliderExample />
<SliderExample value={0.5} />
<SliderExample minimumValue={-1} maximumValue={2}/>
<SliderExample step={0.25} />
<SlidingCompleteExample />
</View>
);
}
});
var styles = StyleSheet.create({
slider:{
height: 10,width: 10,},text:{
fontSize: 14,textAlign: 'center',fontWeight: '500',margin: 10,});
AppRegistry.registerComponent('AwesomeProject',() => AwesomeProject);
运行结果：
