如何使用React Native在Android上设置Slider样式

Question

我想使用React Native在Android上使用Slider.

自定义跟踪图像和拇指是仅限iOS的属性,因此Android上有哪些可用选项来设置轨道和拇指的样式？

更具体地说,我正在寻找一种方法来改变拇指的颜色,最小/最大轨道的颜色,以及它们的厚度......

Answer 1

可能为时已晚,但会有用

我的CustomSlider.js

import React, { Component } from 'react';
import { 
    View, 
    TouchableWithoutFeedback, 
    TouchableOpacity,
    Dimensions,
    Text,
    Slider
} from 'react-native';
import { connect} from 'react-redux';
import rnfs from 'react-native-fs';


class CustomSlider extends Component {

    state={
        slideValue: 0,
    }


    render() {
        const width = Dimensions.get('window').width;
        const sliderStyle = {
            sliderDummy: {
                backgroundColor: '#d3d3d3',
                width: 300,
                height:30,
                borderRadius: 50,
                position: 'absolute',                
            },
            sliderReal: {
                backgroundColor: '#119EC2',
                width: (this.state.slideValue/50) * 300,
                height:30,
            }
        }
        return(
            <View style={{borderRadius: 50, overflow: 'hidden'}}>       
            <View style={{flexDirection: 'row', position: 'absolute'}}>
                <View style={sliderStyle.sliderDummy}></View>
                <View style={sliderStyle.sliderReal}></View>
            </View>
            <Slider 
                style={{width: 300, height: 30, borderRadius: 50}}
                minimumValue={0}
                maximumValue={50}
                value={this.state.slideValue}
                onValueChange={(value)=> this.setState({ slideValue: value}) }
                maximumTrackTintColor='transparent'  
                minimumTrackTintColor='transparent'
                />  

            </View>

        );
    }

};

const mapDispatchToProps = {

};

const mapStateToProps = (state) => {
    return{

    }
};


export default connect(mapStateToProps, mapDispatchToProps)(CustomSlider);

您将获得如下所示的厚度和自定义滑块.

CustomSlider

Answer 2

从 0.42.0 版本开始，现在支持使用 RN Slider 组件为 Android 滑块设置样式。

有关更多详细信息，请参阅拉取请求，或参阅文档了解更多信息。

应该可用于 Android 的道具是：

• 拇指颜色
• 最小轨道颜色
• 最大TrackTintColor

Answer 3

React Native 并不是第一次在一个平台上提供可定制的组件。在 React Native 添加对 Slider 组件样式的支持之前，我建议将其实现为 Android 上的本机 UI 组件：https ://facebook.github.io/react-native/docs/native-components-android.html

我知道我没有一个简单的解决办法，但由于 Android 对 React Native 的支持是在 iOS 之后一段时间才添加的，我认为它可能还需要一段时间才能赶上。