如何让被ScrollView覆盖的组件响应Pressable点击事件？

原因分析 #

ScrollView作为上层组件，默认会拦截所有触摸事件（包括点击、滚动），导致下层的Pressable无法接收到点击信号。

解决方案 #

使用react-native-gesture-handler处理手势冲突，让点击手势优先于滚动手势被响应，同时保留ScrollView的滚动功能。

步骤1：安装并配置react-native-gesture-handler #

npm install react-native-gesture-handler
# iOS需额外执行
cd ios && pod install && cd ..

在App根组件外层包裹GestureHandlerRootView：

import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* 你的业务组件 */}
    </GestureHandlerRootView>
  );
}

步骤2：修改组件代码 #

替换原生ScrollView为gesture-handler的ScrollView，用GestureDetector和TapGesture处理点击逻辑：

import { View, Text } from 'react-native';
import { ScrollView, GestureDetector, TapGesture } from 'react-native-gesture-handler';

export default function YourComponent() {
  return (
    <View style={{ height: 500 }}>
      {/* 数据列表层 */}
      <View
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
        }}
      >
        {[1, 2, 3, 4, 5].map((data, index) => {
          const tapGesture = TapGesture().onEnd(() => {
            console.log(`pressed ${data}`);
          });

          return (
            <View
              key={index}
              style={{
                height: 100,
                borderWidth: 1,
                borderColor: "black",
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              <GestureDetector gesture={tapGesture}>
                <View style={{ width: 100, height: 30, backgroundColor: "red", justifyContent: "center", alignItems: "center" }}>
                  <Text>{data.toString()}</Text>
                </View>
              </GestureDetector>
            </View>
          );
        })}
      </View>

      {/* 覆盖的ScrollView层 */}
      <ScrollView
        style={{ height: 500 }}
        contentContainerStyle={{
          backgroundColor: "gray",
          opacity: 0.5,
          height: 800,
        }}
      />
    </View>
  );
}

原理说明 #

TapGesture的默认优先级高于ScrollView的滚动手势，当触摸事件发生在点击区域时，会优先触发点击逻辑；触摸事件为滚动操作时，则由ScrollView处理滚动，实现两者功能共存。

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