Как создать слайдер на Android с помощью React Native

Я хочу использовать Slider на Android, используя React Native.

Пользовательские изображения для отслеживания и большие пальцы - это только свойства iOS, поэтому каковы доступные опции на Android для стилей дорожки и большого пальца?

В частности, я ищу способ изменить цвет большого пальца, цвет минимальной/максимальной дорожки и их толщину...

Ответ 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);

Вы достигнете толщины и пользовательского слайдера, как показано ниже.

Ответ 2

Начиная с версии 0.42.0, теперь есть некоторая поддержка для стилизации слайдеров Android с помощью компонента RN Slider.

См. Запрос на извлечение для получения дополнительной информации или документацию для получения дополнительной информации.

Реквизиты, которые должны быть использованы для Android:

thumbTintColor
minimumTrackTintColor
maximumTrackTintColor

Ответ 3

Это не первый случай, когда React Native имеет компонент, настраиваемый только на одной платформе. Пока React Native не добавит поддержки для стилизации компонента Slider, я предлагаю внедрить его как собственный компонент пользовательского интерфейса на Android: https://facebook.github.io/react-native/docs/native-components-android.html

Я знаю, что у меня нет простого решения, но поскольку поддержка Android для React Native была добавлена через iOS, я думаю, что все еще может быть какое-то время, пока она не настигнет.