iOS 滑块

属性

Edit on GitHub

maximumValue 数值型

滑动块初始化最大值。默认值是 1。

minimumValue 数值型

滑动块初始化最小值。默认值是 0。

onSlidingComplete 函数

当用户已经完成改变它的值后，调用回调函数（例如，当滑动块被释放）

onValueChange 函数

当用户拖动滑动块时，连续不断的调用回调函数

style View#style

用于对 Slider 的设计与布局。未获取更多的信息，请查看StyleSheet.js 和 ViewStylePropTypes.js

value 数值型

初始化滑动块的值。该值应该是介于最大值和最小值之间的，最大值默认为 1，最小值默认为 0。默认值为 0。

这不是一个控制组件，比如说，如果你不更新组件的值，那么它将不会被重置成它的初始值。

例子

Edit on GItHub

1. 'use strict';
2. var React = require('react-native');
3. var {
4. SliderIOS,
5. Text,
6. StyleSheet,
7. View,
8. } = React;
9. var SliderExample = React.createClass({
10. getInitialState() {
11. return {
12. value: 0,
13. };
14. },
15. render() {
16. return (
17. <View>
18. <Text style={styles.text} >
19. {this.state.value}
20. </Text>
21. <SliderIOS
22. style={styles.slider}
23. onValueChange={(value) => this.setState({value: value})} />
24. </View>
25. );
26. }
27. });
28. var styles = StyleSheet.create({
29. slider: {
30. height: 10,
31. margin: 10,
32. },
33. text: {
34. fontSize: 14,
35. textAlign: 'center',
36. fontWeight: '500',
37. margin: 10,
38. },
39. });
40. exports.title = '<SliderIOS>';
41. exports.displayName = 'SliderExample';
42. exports.description = 'Slider input for numeric values';
43. exports.examples = [
44. {
45. title: 'SliderIOS',
46. render(): ReactElement { return <SliderExample />; }
47. }
48. ];