Как оформить слайдер в React Native

У меня есть определенные ползунки. Как мне их стилизовать? Я использую реагировать родной слайдер. Вот мой код (я изменил код из этого пример):

    render() {
        const sliderStyle = {
            sliderDummy: {
                width: 200,
                height: 80,
                position: 'absolute',
            },
            sliderReal: {
                backgroundColor: colors.primary,
                width: (this.state.slideValue / 50) * 200,
                height: 80,
                borderBottomRightRadius: 100,
                borderTopRightRadius: 100
            }
        }
        return (
            <View style = {styles.container}>

                <View style = {{overflow: 'hidden'}}>
                    <View style = {{flexDirection: 'row', position: 'absolute'}}>
                        <View style = {sliderStyle.sliderDummy}></View>
                        <View style = {sliderStyle.sliderReal}></View>
                    </View>
                <Slider
                    style = {{width: 200, height: 80}}
                    minimumValue = {0}
                    maximumValue = {50}
                    value = {this.state.slideValue}
                    onValueChange = {(value)=> this.setState({ slideValue: value}) }
                    maximumTrackTintColor='transparent'
                    minimumTrackTintColor='transparent'
                    thumbStyle = {styles.thumb}
                />
                    <Text>{this.state.slideValue}</Text>
                </View>
            </View>
        );
    }
}

Когда я свайпаю вправо, в середине дорожки появляются закругленные углы:

Но мне нужно что-то вроде этого:

Как оформить слайдер в React Native

Где моя ошибка? Спасибо.

javascript reactjs react-native

18.02.2019 15:48

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

6 226

Ответы 1

Я решил эту проблему проще, чем ожидалось. Я просто установил trackStyle(react-native-slider), и это сработало как шарм. Но теперь у меня другая проблема, как получить дорожку в стиле слайдера, похожую на «зебру».

render() {
        return (
            <View style = {styles.container}>
                <Slider
                    style = {{width: 150, height: 80}}
                    minimumValue = {this.state.min}
                    maximumValue = {this.state.max}
                    value = {this.state.min}
                    onValueChange = {(value)=> this.setState({ slideValue: value}) }
                    maximumTrackTintColor='transparent'
                    minimumTrackTintColor = {colors.primary}
                    thumbStyle = {styles.thumb}
                    trackStyle = {styles.track}
                    step = {1}
                />

                <Text>{this.state.slideValue}</Text>
                <Text>min {this.state.min}</Text>
                <Text>max {this.state.max}</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    thumb: {
        width: 50,
        height: 80,
        backgroundColor: colors.primary,
        borderBottomRightRadius: 100,
        borderTopRightRadius: 100,

    },
    track:{
        height: 80,
        borderBottomRightRadius: 20,
        borderTopRightRadius: 20,
    }
});