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；