diff --git a/.changeset/itchy-geckos-attack.md b/.changeset/itchy-geckos-attack.md new file mode 100644 index 0000000000..f6e07ca4f5 --- /dev/null +++ b/.changeset/itchy-geckos-attack.md @@ -0,0 +1,5 @@ +--- +'@td-design/react-native-picker': patch +--- + +fix: 修复picker组件在滑动时的选中bug diff --git a/packages/react-native-picker/src/components/WheelPicker/index.tsx b/packages/react-native-picker/src/components/WheelPicker/index.tsx index 16b98cb0e0..0fd85787e3 100644 --- a/packages/react-native-picker/src/components/WheelPicker/index.tsx +++ b/packages/react-native-picker/src/components/WheelPicker/index.tsx @@ -64,9 +64,9 @@ export default function WheelPicker({ // the offset might be negative or over the last item. // We therefore clamp the offset to the supported range. const offsetY = Math.min(itemHeight * (data.length - 1), Math.max(event.nativeEvent.contentOffset.y, 0)); - const _index = Math.ceil(offsetY / itemHeight) + 1; + const _index = Math.ceil(offsetY / itemHeight); - const currentItem = data[_index - 1]; + const currentItem = data[_index]; if (currentItem) { onChange(currentItem.value, index); } @@ -93,10 +93,12 @@ export default function WheelPicker({ }); useEffect(() => { - flatListRef.current?.scrollToIndex({ - index: selectedIndex, - animated: false, - }); + setTimeout(() => { + flatListRef.current?.scrollToIndex({ + index: selectedIndex, + animated: false, + }); + }, 100); }, [selectedIndex]); const renderItem = useMemoizedFn(({ item: option, index }: ListRenderItemInfo) => { @@ -123,8 +125,11 @@ export default function WheelPicker({ scrollEventThrottle={16} centerContent onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], { useNativeDriver: true })} - onMomentumScrollBegin={handleMomentumScrollBegin} - onMomentumScrollEnd={handleMomentumScrollEnd} + // onMomentumScrollBegin={handleMomentumScrollBegin} + onScrollBeginDrag={handleMomentumScrollBegin} + // onMomentumScrollEnd={handleMomentumScrollEnd} + // onMomentumScrollEnd 是惯性滚动结束,但是有时候不会被触发,所以换成 onScrollEndDrag + onScrollEndDrag={handleMomentumScrollEnd} snapToOffsets={offsets} decelerationRate={'fast'} getItemLayout={(_, index) => ({ diff --git a/packages/react-native-picker/src/picker/components/Normal/useNormalPicker.ts b/packages/react-native-picker/src/picker/components/Normal/useNormalPicker.ts index 96bc50d9b9..38aad06bbf 100644 --- a/packages/react-native-picker/src/picker/components/Normal/useNormalPicker.ts +++ b/packages/react-native-picker/src/picker/components/Normal/useNormalPicker.ts @@ -54,17 +54,11 @@ export default function useNormalPicker({ return () => sub.remove(); }, [visible]); - const handleChange = (val: ItemValue, index: number) => { - let draft = selectedValue ? [...selectedValue] : undefined; - if (!draft) { - draft = [val]; - } else { - draft[index] = val; - } + const handleChange = (val: ItemValue) => { if (displayType === 'view') { - onChange?.(draft); + onChange?.([val]); } - selectValue(draft); + selectValue([val]); }; const handleClose = () => {