Как создавать ползунки времени в React Native

Из моего недавнего чтения кода я недавно узнал, как создавать собственные ползунки времени. Вся заслуга моему коллеге. Я просто делюсь своими знаниями! Давайте сначала посмотрим, что мы хотим сделать. Мы хотим преобразовать ползунок в ползунки времени, где пользователи могут выбрать одно время или временной диапазон.

Ползунок времени:

Во-первых, давайте настроим для этого наш компонент. С помощью этого фрагмента мы можем завершить инициализацию слайдера. Для нашего компонента слайдера я использую пакет r react-native-multi-slide. С этим пакетом вы получаете один слайдер и слайдер диапазона, так что это неплохо.

const TIME = {  min: 0,  max: 24 }
const SliderPad = 12;

// our time slider component
const SingleSlider = ({}) => {
  const { min, max } = TIME;
  const [width, setWidth] = useState(280);
  const [selected, setSelected] = useState(null);

  if (!selected) {
    setSelected([min]); // we are only selected min, since it is single slider
  }

  // Callbacks
  const onLayout = (event) => {
    setWidth(event.nativeEvent.layout.width - SliderPad * 2);
  };
  const onValuesChangeFinish = (values) => {
    setSelected(values);
  };

  return (
    <View onLayout={onLayout} style={styles.wrapper}>
        <MultiSlider
          min={min}
          max={max}
          allowOverlap
          values={selected}
          sliderLength={width}
          onValuesChangeFinish={onValuesChangeFinish}
          enableLabel={true}
          trackStyle={{
            height: 10,
            borderRadius: 8,
          }}
          markerOffsetY={3}
          selectedStyle={{
            backgroundColor: "#895CDF",
          }}
          unselectedStyle={{
            backgroundColor: "#EEF3F7",
          }}
        />
    </View>
  );
}

Ползунок времени диапазона:

Ползунок диапазона также такой же, за исключением того, что мы устанавливаем наши значения на максимальное и минимальное значение.

if (!selected) {
    setSelected([min, max]); 
  }

Итак, на этом наша первоначальная настройка закончена. У нас есть ползунки, но ползунки работают как обычные ползунки со значениями от 0 до 24. Теперь пора преобразовать это в ползунок времени.

Чтобы у нас были собственные ярлыки, нам необходимо передать свойства customLabel в наш слайдер. Мы будем создавать компонент настраиваемой метки, который будет выполнять преобразование времени и возвращать метки времени.

customLabel={SliderCustomLabel(textTransformerTimes)}

А теперь пройдемся по самому интересному.

const width = 50;

function LabelBase(props)
{
    const { position, value } = props;

    return (
        <View
            style={[
                styles.sliderLabel, // this one is position absolute
                {
                    left: position - width / 2,
                },
            ]}>
            <Text style={styles.sliderLabelText}>{value}</Text>
        </View>
    );
}

export default function SliderCustomLabel(textTransformer: (value: number) => string)
{
    return function (props)
    {
       // these props are coming from the package
        const {
            oneMarkerValue,
            twoMarkerValue,
            oneMarkerLeftPosition,
            twoMarkerLeftPosition,
        } = props;

        return (
            <View>
                <LabelBase
                    position={oneMarkerLeftPosition}
                    value={textTransformer(oneMarkerValue)}
                />
                {twoMarkerValue ? 
                    <LabelBase
                        position={twoMarkerLeftPosition}
                        value={textTransformer(twoMarkerValue)}
                    /> : null
                }
            </View>
        );
    };
}

const styles = StyleSheet.create({
    sliderLabel: {
        position: 'absolute',
        justifyContent: 'center',
        top: 30,
        width: width,
        height: width,
    },
    sliderLabelText: {
        textAlign: 'center',
        lineHeight: width,
        flex: 1,
    },
});

Немного пояснения того, что здесь происходит.

SliderCustomLabel - это функция, которая принимает функцию textTransformer и возвращает компоненты настраиваемой метки.
TextTransformer - это функция, которая принимает значение ползунка от 0 до 24 и преобразует их в значения времени.
LabelBase - это компонент, из которого мы возвращаем текст. Он также обрабатывает позицию для нашего текста.

const textTransformerTimes = (value) => {
  return value === 0 ? "12am" : (value < 13 ? value : value - 12) +    (value < 12 ? "am" : "pm");
};

Ознакомьтесь с закуской, если хотите увидеть ее в действии.

Спасибо за чтение. Надеюсь, вы нашли это полезным!

Больше контента на plainenglish.io

Как создавать ползунки времени в React Native

Вопросы по теме