From b8e7a67ee89b734df907d83df9ccf67e5c1665f1 Mon Sep 17 00:00:00 2001
From: al <al@cdhncy.com>
Date: Fri, 16 Aug 2024 23:55:29 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9Emyslider?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/MySlider/index.jsx | 195 ++++++++++++++++++++++++++++++++++
 screeens/Search/index.jsx     |  13 +++
 2 files changed, 208 insertions(+)
 create mode 100644 components/MySlider/index.jsx

diff --git a/components/MySlider/index.jsx b/components/MySlider/index.jsx
new file mode 100644
index 0000000..654fa86
--- /dev/null
+++ b/components/MySlider/index.jsx
@@ -0,0 +1,195 @@
+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>
+  );
+}
diff --git a/screeens/Search/index.jsx b/screeens/Search/index.jsx
index db8303f..21a6801 100644
--- a/screeens/Search/index.jsx
+++ b/screeens/Search/index.jsx
@@ -9,6 +9,7 @@ import Toast from "react-native-toast-message";
 import baseRequest from "../../utils/baseRequest";
 import { generateSignature } from "../../utils/crypto";
 import MyDivider from "../../components/MyDivider/index";
+import MySlider from "../../components/MySlider";
 
 export default function Search({ navigation, route }) {
   const tailwind = useTailwind();
@@ -342,6 +343,18 @@ export default function Search({ navigation, route }) {
           value={search}
         />
       </View>
+      <MySlider
+        height={40}
+        min={0}
+        max={400}
+        defaultValue={100}
+        step={1}
+        onChange={() => {}}
+        maximumTrackTintColor="#dcdbdb"
+        minimumTrackTintColor="#577bff"
+        processHeight={5}
+        thumbImage={require("../../assets/icon/32DP/edit.png")}
+      />
       <ScrollView style={tailwind("flex-1 px-4")}>
         {zones.length > 0 && (
           <Text style={tailwind("mt-2 text-white text-xl font-medium")}>