Slider

参考文档

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

Props

属性	类型	必填	描述
style	View.style	否	用于设置和设置Slider的样式。有关更多信息，请参见StyleSheet.js和ViewStylePropTypes.js。
disabled	bool	否	如果为true，用户就不能移动滑块。默认为false。
maximumValue	number	否	滑块的最大值（当滑块滑到最右端时表示的值）。默认为1。
minimumTrackTintColor	color	否	滑块左侧轨道的颜色。在iOS上默认为一个蓝色的渐变色。
minimumValue	number	否	滑块的最小值（当滑块滑到最左端时表示的值）。默认为0。
onSlidingComplete	function	否	用户松开滑块的时候调用此回调，无论值是否变化。回调值为当前值
onValueChange	function	否	在用户拖动滑块的过程中不断调用此回调。
step	number	否	滑块的步长（拖动变化的最小单元）。这个值应该在0到(maximumValue - minimumValue)之间。默认值为0。
maximumTrackTintColor	color	否	滑块右侧轨道的颜色。在iOS上默认为一个蓝色的渐变色。
testID	string	否	用于在UI自动化测试中找到此视图。
value	number	否	滑块的初始值。这个值应该在最小值和最大值之间。默认值是0。注意：这不是一个受控组件！也就是说，你不需要在滑动过程中去手动更新值。
thumbTintColor	color	否	前景开关手柄的颜色。(Android 平台)
maximumTrackImage	Image.propTypes.source	否	指定一个滑块右侧轨道背景图。仅支持静态图片。图片最左边的像素会被平铺直至填满右侧轨道。（iOS平台）
minimumTrackImage	Image.propTypes.source	否	指定一个滑块左侧轨道背景图。仅支持静态图片。图片最右边的像素会被平铺直至填满左侧轨道。（iOS 平台）
thumbImage	Image.propTypes.source	否	给滑块设置一张图片。只支持静态图片。（iOS 平台）
trackImage	Image.propTypes.source	否	给轨道设置一张背景图。只支持静态图片。图片最中央的像素会被平铺直至填满轨道。（iOS 平台）

Example

示例

import React, { Component } from 'react';
import {View,Slider,StyleSheet,Text } from 'react-native';
export class pageComponent extends Component {
    constructor(props){
        super(props);
        this.state={
            value: 10
        }
    }
    onChange =(value)=>{
        this.setState({
            value: value
        })
    };
    render(){
        return(
            <View style={styles.container}>
                <Slider style={styles.sliderView}
                        minimumValue={0}
                        maximumValue={100}
                        value={this.state.value}
                        onValueChange={this.onChange}/>
                <Text style={styles.text}>
                    当前value：{this.state.value}
                </Text>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        marginTop: 100,
        padding: 10,
        borderRadius: 5,
        alignItems: 'center',
        width: 300
    },
    sliderView: {
        width: 260,
        marginTop: 20
    },
    text: {
        marginTop: 20,
        fontSize:20,
        color:'#00ff00'
    }
});

results matching ""

No results matching ""