ReactNative: 使用滑塊組件Slider組件

一、簡介

滑塊組件Slider組件是一個跨平台的組件，用戶可以拖拽它的值來調整播放或瀏覽的進度，例如音樂、視頻、電子書等等。

 

二、API

它的API如下所示：

//滑塊組件風格布局
style: ViewPropTypes.style

//滑塊的初始值。 該值應介於minimumValue和maximumValue之間，分別默認為0和1。 預設值為0。
value: PropTypes.number

//滑塊的步長值。 該值應介於0到（maximumValue-minimumValue）之間。 預設值為0。
step: PropTypes.number

//滑塊的最小值, 默認為0
minimumValue: PropTypes.number

//滑塊的最大值, 默認為1
maximumValue: PropTypes.number

//滑塊按鈕左側軌道的顏色。覆蓋iOS上的默認藍色漸變圖像
minimumTrackTintColor: ColorPropType

//滑塊按鈕右側軌道的顏色。覆蓋iOS上的默認藍色漸變圖像
maximumTrackTintColor: ColorPropType

//滑塊是否可交互
disabled: PropTypes.bool

//當前滑塊的軌道圖像。 僅支持靜態圖像。
trackImage: Image.propTypes.source

//分配最小軌道圖像。 僅支持靜態圖像。
minimumTrackImage: Image.propTypes.source

//分配最大軌道圖像。 僅支持靜態圖像。
maximumTrackImage: Image.propTypes.source

//為滑塊設置圖像。 僅支持靜態圖像。
thumbImage: Image.propTypes.source

//為滑塊設置顏色, 僅限安卓使用
thumbTintColor: ColorPropType

//滑塊值改變時的回調
onValueChange: PropTypes.func

//滑塊滑動終點時調用
onSlidingComplete: PropTypes.func

//唯一標識
testID: PropTypes.string

 

三、使用

簡單使用如下：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';

import {
    AppRegistry,
    StyleSheet,
    View,
    Slider
} from 'react-native';


export default class ReactNativeDemo extends Component {

    render() {
        return (
            <View style={[styles.flex,styles.bgColor,styles.center]}>
                <View style={{marginTop: 80 , marginLeft: 40}}>
                    <Slider
                        style={{width:300}}
                        value={0.3}
                        step={0}
                        minimumValue={0}
                        maximumValue={1}
                        minimumTrackTintColor={'red'}
                        maximumTrackTintColor={'green'}
                        onValueChange={ (value) => {console.log('value:'+value)}}
                        onSlidingComplete={ () => {console.log('onSlidingComplete')}}
                    />
                </View>
                <View style={{marginTop: 140 , marginLeft: 40}}>
                    <Slider
                        style={{width:300}}
                        value={0.3}
                        step={0}
                        minimumValue={0}
                        maximumValue={1}
                        // trackImage={{uri:'trackImage.png',scale:2}}
                        // minimumTrackImage={{uri:'minimumTrackImage.png',scale:2}}
                        // maximumTrackImage={{uri:'maximumTrackImage.png',scale:2}}
                        thumbImage={{uri:'thumbImage.png',scale:2}}
                        onValueChange={ (value) => {console.log('value:'+value)}}
                        onSlidingComplete={ () => {console.log('onSlidingComplete')}}
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    flex: {
        flex: 1
    },
    bgColor: {
      backgroundColor: 'white'
    },
    center: {
        //alignItems: 'center',
        justifyContent: 'center',
    }
});

AppRegistry.registerComponent('ReactNativeDemo', () => ReactNativeDemo);