React Native中如何让ScrollView在GestureDetector内正常工作？

当GestureDetector嵌套ScrollView时，手势拦截会导致ScrollView无法正常滚动。核心解决思路是让ScrollView的滚动手势优先响应，仅当ScrollView滚动到边界（顶部/底部）无法继续滚动时，才触发BottomSheet的拖拽手势。

具体实现方案 #

使用react-native-reanimated的动画能力，结合Animated.ScrollView实时获取滚动状态，在BottomSheet的拖拽手势中添加条件判断，控制手势的生效时机。

完整代码示例 #

import { View, Text, useWindowDimensions } from 'react-native';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withSpring,
  GestureDetector,
  Gesture,
  AnimatedScrollView,
} from 'react-native-reanimated';

const BottomSheet = ({ list }) => {
  const { height: screenHeight } = useWindowDimensions();
  const sheetContainerHeight = screenHeight * 0.75;
  
  // BottomSheet的垂直偏移量（控制拖拽位置）
  const sheetY = useSharedValue(0);
  // ScrollView的实时滚动偏移量
  const scrollOffsetY = useSharedValue(0);
  // ScrollView的最大可滚动高度（内容高度 - 容器高度）
  const maxScrollY = useSharedValue(0);

  // BottomSheet的动画样式
  const anStyle = {
    anContainer: useAnimatedStyle(() => ({
      position: 'absolute',
      bottom: 0,
      width: '100%',
      height: sheetContainerHeight,
      backgroundColor: '#fff',
      transform: [{ translateY: sheetY.value }],
    })),
  };

  // BottomSheet拖拽手势
  const panGesture = Gesture.Pan()
    .direction(Gesture.DIRECTION_VERTICAL)
    .onUpdate((event) => {
      // 仅当ScrollView滚动到顶部且向下拖拽，或滚动到底部且向上拖拽时，才移动BottomSheet
      if (scrollOffsetY.value === 0 && event.translationY > 0) {
        sheetY.value = event.translationY;
      } else if (scrollOffsetY.value >= maxScrollY.value && event.translationY < 0) {
        sheetY.value = event.translationY;
      }
    })
    .onEnd(() => {
      // 松手后回弹到初始位置
      sheetY.value = withSpring(0);
    });

  // 监听ScrollView滚动，更新滚动偏移量
  const onScroll = Animated.event(
    [{ nativeEvent: { contentOffset: { y: scrollOffsetY } } }],
    { useNativeDriver: false }
  );

  // 监听ScrollView内容尺寸变化，计算最大可滚动高度
  const onContentSizeChange = (_, contentHeight) => {
    maxScrollY.value = contentHeight - sheetContainerHeight;
  };

  return (
    <GestureDetector gesture={panGesture}>
      <Animated.View style={anStyle.anContainer}>
        <AnimatedScrollView
          onScroll={onScroll}
          onContentSizeChange={onContentSizeChange}
          scrollEventThrottle={16}
          showsVerticalScrollIndicator={true}
        >
          {list.map((item, index) => (
            <Text key={index} style={{ padding: 20, fontSize: 18, borderBottomWidth: 1, borderBottomColor: '#eee' }}>
              {item}
            </Text>
          ))}
        </AnimatedScrollView>
      </Animated.View>
    </GestureDetector>
  );
};

export default BottomSheet;

关键逻辑说明 #

1. 滚动状态监听：通过AnimatedScrollView的onScroll实时获取滚动偏移量scrollOffsetY，通过onContentSizeChange计算ScrollView的最大可滚动高度maxScrollY。
2. 手势条件判断：在BottomSheet的拖拽手势中，仅当满足以下任一条件时才响应拖拽：
   • ScrollView已滚动到顶部（scrollOffsetY.value === 0）且用户向下拖拽
   • ScrollView已滚动到底部（scrollOffsetY.value >= maxScrollY.value）且用户向上拖拽
3. 回弹效果：拖拽结束后通过withSpring实现BottomSheet的平滑回弹。

内容的提问来源于stack exchange，提问作者AliMohammed Manzoor