React-Native 七：Slider

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

一、属性

名称	类型	说明
disabled	bool	如果为true，用户无法移动这个滑动条。默认值为false。
maximumValue	number	滑动条最大值。默认为1。
minimumValue	滑动条最小值，默认为0。
onSlidingComplete	function	当用户完成值的改变被回调的方法。
onValueChange	当用户正在滑动滑动条持续回调的方法；
step	滑动条的最小单位。这个值应该在0到最大值-最小值之间。默认为0。
testID	string
value	滑动条选择的值。这个值应该在最小值和最大值之间，它们的默认值分别为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；