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. ];