rn-range-slider

rn-range-slider — это библиотека для создания слайдера диапазона в React Native. Она позволяет пользователям выбирать диапазон значений с помощью двух ползунков, что делает её идеальной для создания фильтров цен, диапазонов дат и других элементов интерфейса, требующих выбора диапазона значений.

Основные возможности rn-range-slider

• Поддержка двух ползунков для выбора диапазона значений.
• Гибкая настройка внешнего вида и стилей.
• Поддержка пользовательских меток и значений.
• Обработка событий изменения значений.
• Совместимость с React Native и Expo.

Установка

npm install rn-range-slider

Или с использованием Yarn:

yarn add rn-range-slider

Основное использование

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import RangeSlider from 'rn-range-slider';

const RangeSliderExample = () => {
    const [low, setLow] = useState(0);
    const [high, setHigh] = useState(100);

    return (
        
            Выбранный диапазон: {low} - {high}
             {
                    setLow(low);
                    setHigh(high);
                }}
            />
        
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    slider: {
        width: 300,
        height: 80,
    },
});

export default RangeSliderExample;

Настройка внешнего вида

Вы можете настроить внешний вид слайдера с помощью различных стилей и пропсов:

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import RangeSlider from 'rn-range-slider';

const CustomRangeSlider = () => {
    const [low, setLow] = useState(10);
    const [high, setHigh] = useState(90);

    return (
        
            Выбранный диапазон: {low} - {high}
             {
                    setLow(low);
                    setHigh(high);
                }}
            />
        
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    slider: {
        width: 300,
        height: 80,
    },
});

export default CustomRangeSlider;

Пользовательские метки

Вы можете добавить пользовательские метки к слайдеру для отображения значений:

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import RangeSlider from 'rn-range-slider';

const Label = ({ text }) => (
    
        {text}
    
);

const LabeledRangeSlider = () => {
    const [low, setLow] = useState(20);
    const [high, setHigh] = useState(80);

    return (
        
            Выбранный диапазон: {low} - {high}
             }
                onValueChanged={(low, high) => {
                    setLow(low);
                    setHigh(high);
                }}
            />
        
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    slider: {
        width: 300,
        height: 80,
    },
    label: {
        backgroundColor: 'white',
        padding: 5,
        borderRadius: 5,
        elevation: 3,
    },
});

export default LabeledRangeSlider;

Обработка событий изменения значений

Вы можете обрабатывать события изменения значений слайдера и выполнять дополнительные действия:

import React, { useState } from 'react';
import { View, Text, StyleSheet, Alert } from 'react-native';
import RangeSlider from 'rn-range-slider';

const EventHandlingRangeSlider = () => {
    const [low, setLow] = useState(0);
    const [high, setHigh] = useState(100);

    const handleValueChange = (low, high) => {
        setLow(low);
        setHigh(high);
        Alert.alert(`Диапазон изменен: ${low} - ${high}`);
    };

    return (
        
            Выбранный диапазон: {low} - {high}
            
        
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    slider: {
        width: 300,
        height: 80,
    },
});

export default EventHandlingRangeSlider;

Интеграция с Expo

rn-range-slider совместим с Expo, что позволяет легко интегрировать его в ваше приложение на базе Expo:

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import RangeSlider from 'rn-range-slider';
import { AppLoading } from 'expo';

const ExpoRangeSlider = () => {
    const [low, setLow] = useState(0);
    const [high, setHigh] = useState(100);
    const [isReady, setIsReady] = useState(false);

    if (!isReady) {
        return  Promise.resolve()} onFinish={() => setIsReady(true)} onError={console.warn} />;
    }

    return (
        
            Выбранный диапазон: {low} - {high}
             {
                    setLow(low);
                    setHigh(high);
                }}
            />
        
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    slider: {
        width: 300,
        height: 80,
    },
});

export default ExpoRangeSlider;

Заключение

rn-range-slider — это мощная библиотека для создания слайдеров диапазона в React Native. Она предлагает гибкие возможности настройки и интеграции, что делает её отличным выбором для создания интерактивных интерфейсов в ваших мобильных приложениях.