横向FlatList滚动时，是否存在最优方案禁用父容器滚动？

当前逐子项绑定Pressable事件控制scrollEnabled的实现，运行中会存在几个共性问题：

• 触摸覆盖不全：手指落在横向FlatList的卡片间隙、滚动条区域时，未触达Pressable组件的响应范围，不会触发禁用父级滚动的逻辑，依然会出现父级垂直滚动误触发的情况
• 事件易丢失：按住卡片上下滑动过程中，手指滑出当前Pressable的响应范围时，部分场景下onPressOut会延迟触发甚至完全不触发，最终导致父级ScrollView的滚动被永久禁用，需要额外编写大量兜底判断
• 性能损耗明显：每次按压、抬手都触发setState更新，会带动包含长列表的整个ScrollView区域整体重渲染，卡片数量较多时会出现明显的滑动卡顿

核心思路是将触摸事件的绑定层级上移，不再给每个卡片子项重复绑定Pressable逻辑，直接在横向FlatList的外层容器做统一的触摸拦截，同时通过原生属性直改的方式替代state驱动的状态更新，从根源规避上述问题。
具体实现逻辑：

• 给父级垂直ScrollView绑定ref，直接通过原生组件方法修改scrollEnabled属性，不依赖页面state驱动
• 在横向FlatList的最外层包裹一层普通View，统一绑定触摸开始、结束、取消的事件回调：
  • 手指按下进入横向列表区域时，直接通过ref调用setNativeProps将父级ScrollView的scrollEnabled设为false
  • 手指抬起、触摸被取消时，同样通过setNativeProps将scrollEnabled改回true
• 整个过程不触发任何JS层的setState，不会引起页面整体重渲染

优化后的代码结构：

import { useRef } from 'react';
import { ScrollView, FlatList, View } from 'react-native';

export default function CardPage() {
  // 用ref存组件引用，不触发重渲染
  const parentScrollRef = useRef(null);

  // 直接操作原生属性的手势回调
  const handleTouchStart = () => {
    parentScrollRef.current?.setNativeProps({ scrollEnabled: false });
  };
  const handleTouchEnd = () => {
    parentScrollRef.current?.setNativeProps({ scrollEnabled: true });
  };

  return (
    <ScrollView ref={parentScrollRef}>
      <Header />
      {/* 外层View统一拦截横向列表区域的所有触摸 */}
      <View
        onTouchStart={handleTouchStart}
        onTouchEnd={handleTouchEnd}
        onTouchCancel={handleTouchEnd}
      >
        <FlatList
          horizontal={true}
          data={cards}
          renderItem={({ item }) => <ScrollingCard item={item} />}
          keyExtractor={(item) => item.toString()}
        />
      </View>
      {cards.map((item) => (
        <ScrollingCard key={`vertical-${item}`} item={item} type="Vertical" />
      ))}
    </ScrollView>
  );
}

• 触摸覆盖完整：整个横向FlatList的所有可交互区域（包括卡片间隙、滚动条、卡片本身）的触摸都会触发拦截逻辑，不存在漏判场景
• 性能无额外损耗：所有属性修改都在原生层完成，没有JS层状态更新引发的重渲染，长列表场景下的滑动流畅度和原生ScrollView无差异
• 逻辑闭环可靠：原生触摸事件的响应优先级高于组件自身的手势判定，不会出现事件丢失、延迟触发的异常，不存在父级滚动被永久禁用的问题
• 代码复用性高：不需要给每个卡片子项重复绑定Pressable和状态逻辑，后续调整横向列表的子组件结构时，也不需要重复修改触摸事件绑定

补充说明：如果横向FlatList内的ScrollingCard本身自带垂直滚动能力，该方案可完全兼容——进入卡片区域后父级滚动被禁用，卡片内部的垂直滚动逻辑由自身的ScrollView处理，不会出现手势冲突。

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