React-Native 七：Slider

发布时间：2020-12-15 03:33:40 所属栏目：百科来源：网络整理

导读：用于从一个值范围选择一个值的组件。一、属性名称类型说明 disabled bool 如果为true，用户无法移动这个滑动条。默认值为false。 maximumValue number 滑动条最大值。默认为1。 minimumValue 滑动条最小值，默认为0。 onSlidingComplete function 当用户

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

一、属性

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!