tiefen_space_app/components/MySlider/index.jsx

import {
  View,
  Text,
  TouchableOpacity,
  Modal,
  PanResponder,
  Dimensions,
} from "react-native";
import React, { useState, useEffect, useRef } from "react";
import { useTailwind } from "tailwind-rn";
import { Image } from "expo-image";
export default function MySlider({
  min,
  max,
  step,
  height = 60,
  width = Dimensions.get("window").width,
  onChange = () => {},
  onAfterChange = () => {},
  defaultValue = 0,
  disabled = false,
  thumbSize = 30,
  leftValue = 20,
  rightValue = 80,
  thumbImage = null,
  maximumTrackTintColor = "#dcdbdb",
  minimumTrackTintColor = "#577BFF",
  processHeight = 7,
}) {
  const leftProcess = useRef(0);
  const rightProcess = useRef(0);
  const [processWidth, setProcessWidth] = useState(330);
  const tailwind = useTailwind();
  const leftWatcher = useRef(null);
  const rightWatcher = useRef(null);
  useEffect(() => {
    leftWatcher.current = PanResponder.create({
      // 建立监视器
      onStartShouldSetPanResponder: () => true,
      onPanResponderGrant: _onPanResponderGrantLeft, // 按下
      onPanResponderMove: _onPanResponderMoveLeft, // 移动
      onPanResponderEnd: _onPanResponderEndLeft, // 结束
    });
    rightWatcher.current = PanResponder.create({
      // 建立监视器
      onStartShouldSetPanResponder: () => true,
      onPanResponderGrant: _onPanResponderGrantRight, // 按下
      onPanResponderMove: _onPanResponderMoveRight, // 移动
      onPanResponderEnd: _onPanResponderEndRight, // 结束
    });
    const currentLeftProcess = leftValue / (max - min);
    const currentRightProcess = rightValue / (max - min);
    leftProcess.current = currentLeftProcess;
    rightProcess.current = currentRightProcess;
    // setRightProcess(rightProcess);
    setProcessWidth(width - thumbSize);
    console.log("rightProcess", rightProcess.current);
  }, []);

  // 左侧滑块事件
  const _onPanResponderGrantLeft = (e, gestureState) => {
    const process = (gestureState.x0 - thumbSize / 2) / processWidth;
    _changeProcess(process, "left");
  };

  const _onPanResponderEndLeft = (e, gestureState) => {
    if (onAfterChange) {
      onAfterChange(gestureState.x0);
    }
  };
  const _onPanResponderMoveLeft = (e, gestureState) => {
    const process =
      (gestureState.x0 - thumbSize / 2 + gestureState.dx) / processWidth;
    _changeProcess(process, "left");
  };

  // 右侧滑块事件
  const _onPanResponderGrantRight = (e, gestureState) => {
    const process = (gestureState.x0 - thumbSize / 2) / processWidth;
    _changeProcess(process, "right");
  };

  const _onPanResponderEndRight = (e, gestureState) => {
    if (onAfterChange) {
      onAfterChange(gestureState.x0);
    }
  };
  const _onPanResponderMoveRight = (e, gestureState) => {
    const process =
      (gestureState.x0 - thumbSize / 2 + gestureState.dx) / processWidth;
    _changeProcess(process, "right");
    // console.log("process", processWidth);
  };
  const _changeProcess = (changeProcess, direction) => {
    // 判断滑动开关
    if (disabled) return;
    if (changeProcess >= 0 && changeProcess <= 1) {
      onChange(changeProcess);

      // 按步长比例变化刻度
      const v = changeProcess * (max - min);
      const newValue = Math.round(v / step) * step;

      const newProcess = newValue / (max - min);
      if (process !== newProcess) {
        if (direction == "left") {
          if (newProcess < rightProcess.current)
            leftProcess.current = newProcess;
        } else {
          if (newProcess > leftProcess.current) {
            console.log("newValue", newProcess, rightProcess.current);
            rightProcess.current = newProcess;
          }
        }
      }
    }
  };
  return (
    <View
      // style={[
      //   styles.container,
      //   {
      //     height,
      //     width,
      //   },
      // ]}
      style={{
        ...tailwind(),
        height: "max-content",
        width,
        // flex: 1,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <View style={{ width: "100%", position: "relative" }}>
        <View
          style={{
            backgroundColor: maximumTrackTintColor,
            // flex: 1,
            height: processHeight,
            width: processWidth,
            // marginRight: thumbSize / 2,
            position: "absolute",
            left: 0,
            left: thumbSize / 2,
            zIndex: 1,
          }}
        />
        <View
          style={{
            backgroundColor: minimumTrackTintColor,
            width: (rightProcess.current - leftProcess.current) * processWidth,
            height: processHeight,
            marginLeft: thumbSize / 2 + leftProcess.current * processWidth,
            position: "absolute",
            left: 0,
            zIndex: 10,
          }}
        />
      </View>
      <View
        transition={1000}
        cachePolicy="disk"
        // style={tailwind("w-full h-full rounded-lg overflow-hidden")}
        style={{
          width: thumbSize,
          height: thumbSize,
          backgroundColor: "#fff",
          borderRadius: 50,
          position: "absolute",
          left: leftProcess.current * processWidth,
          zIndex: 10,
        }}
        {...leftWatcher.current?.panHandlers}
      />
      <View
        transition={1000}
        cachePolicy="disk"
        // style={tailwind("w-full h-full rounded-lg overflow-hidden")}
        style={{
          width: thumbSize,
          height: thumbSize,
          backgroundColor: "#fff",
          borderRadius: 50,
          position: "absolute",
          left: rightProcess.current * processWidth,
          zIndex: 10,
        }}
        {...rightWatcher.current?.panHandlers}
      />
    </View>
  );
}