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

fix: 修复picker组件在滑动时的选中bug
thundersdata-frontend · May 20, 2024 · d7f062a · d7f062a
2 parents e8d4073 + 12ef8c8
commit d7f062a
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 17 deletions.
diff --git a/.changeset/itchy-geckos-attack.md 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
@@ -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<OptionItem>) => {
@@ -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
@@ -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 = () => {