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滑块样式。

See the pull request了解更多详情，或参阅the docs了解详情。

应该可用于Android的道具是：

thumbTintColor
minimumTrackTintColor
maximumTrackTintColor

Answer 3

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

我知道我没有一个简单的解决方法，但是因为在iOS之后添加了对React Native的Android支持，我认为可能还有一段时间才能解决。

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

3 个答案: