用于从一个值范围选择一个值的组件。
一、属性
名称
|
类型
|
说明
|
disabled | bool | 如果为true,用户无法移动这个滑动条。默认值为false。 |
maximumValue | number | 滑动条最大值。默认为1。 |
minimumValue | number | 滑动条最小值,默认为0。 |
onSlidingComplete | function | 当用户完成值的改变被回调的方法。 |
onValueChange | function | 当用户正在滑动滑动条持续回调的方法; |
step | number | 滑动条的最小单位。这个值应该在0到最大值-最小值之间。默认为0。 |
testID | string | |
value | number | 滑动条选择的值。这个值应该在最小值和最大值之间,它们的默认值分别为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);
运行结果:
提示1:在编写完成代码,Reload JS之后,程序运行报错如下:
处理:通过react-native --version查看你当前的reat-native的版本。如果该版本不支持Slider控件,则查阅《React-Native 学习十:React-Native升级》升级对对应的版本。并重新安装App Reload;