Merge pull request #843 from thundersdata-frontend/rn-issue

fix: 修复slider滑动判断step的逻辑bug

Author: chj-damon

.changeset/itchy-humans-greet.md

@@ -0,0 +1,5 @@
+---
+'@td-design/react-native': patch
+---
+
+fix: 修复slider滑动判断step的逻辑bug

packages/react-native/src/slider/index.tsx

@@ -64,7 +64,7 @@ const Slider: FC<SliderProps> = props => {
   } = props;
   const KNOB_WIDTH = height;
   const sliderRange = width - KNOB_WIDTH;
-  const oneStepValue = sliderRange / max;
+  const oneStepValue = Math.floor(sliderRange / (max - min)) || 1;
 
   const { progressStyle, knobStyle, onGestureEvent, label } = useSlider({
     min,

packages/react-native/src/slider/useSlider.ts

@@ -46,8 +46,18 @@ export default function useSlider({
       translateX.value = clamp(event.translationX + ctx.offsetX, min * oneStepValue, max * oneStepValue);
     },
     onEnd() {
+      // 判断当前停留的位置处于第几步
+      const currentStep = translateX.value / oneStepValue;
+      // 取余数进行判断，是否超过一半
+      const remainder = currentStep % 1;
+      if (remainder >= 0.5) {
+        translateX.value = Math.ceil(currentStep) * oneStepValue;
+      } else {
+        translateX.value = Math.floor(currentStep) * oneStepValue;
+      }
+
       if (onChange) {
-        runOnJS(onChange)(Number(label.value));
+        runOnJS(onChange)(translateX.value / oneStepValue);
       }
     },
   });