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；

React-Native 七：Slider