React-Native 七：Slider

用于从一个值范围选择一个值的组件。

一、属性

名称	类型	说明
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；