(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间)
来,讲这个组件之前,我们先学习一下英文单词,Slider ,来跟我一起读:Slider ,哈哈……不逗你们了,slider 是滑块的意思,翻译完,大家就应该知道这个组件的功能和作用了吧?就是一个滑动选择范围中的一个值的组件。
照例,老样子,在使用之前,看看这个组件的相关属性。如下:
来,看看效果图大致如下:
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);