diff --git a/.changeset/itchy-humans-greet.md b/.changeset/itchy-humans-greet.md new file mode 100644 index 0000000000..e16a25ec2c --- /dev/null +++ b/.changeset/itchy-humans-greet.md @@ -0,0 +1,5 @@ +--- +'@td-design/react-native': patch +--- + +fix: 修复slider滑动判断step的逻辑bug diff --git a/packages/react-native/src/slider/index.tsx b/packages/react-native/src/slider/index.tsx index 6676a6cacd..d44570be05 100644 --- a/packages/react-native/src/slider/index.tsx +++ b/packages/react-native/src/slider/index.tsx @@ -64,7 +64,7 @@ const Slider: FC = 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, diff --git a/packages/react-native/src/slider/useSlider.ts b/packages/react-native/src/slider/useSlider.ts index 0cb97f3340..01a4ab1a94 100644 --- a/packages/react-native/src/slider/useSlider.ts +++ b/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); } }, });