iOS端FlatList仅支持三指滚动求助：需改为单指滚动

在iOS设备上使用FlatList时，若列表项使用TouchableOpacity组件，会出现仅支持三指滚动、单指滚动失效的问题——这是因为TouchableOpacity会拦截单指触摸事件，导致FlatList无法优先捕获滚动操作。以下是几种可行的解决方法：

方法1：给TouchableOpacity添加延迟点击属性 #

给TouchableOpacity设置delayPressIn属性，让滚动事件先被FlatList识别，仅当用户按住超过设定时长时才触发点击事件，既不影响滚动，也能保留点击交互：

function ListItem({ item }: { item: Item }) {
  return (
    <TouchableOpacity
      key={item.value}
      style={{
        height: 50,
        justifyContent: 'center',
        alignItems: 'center',
        borderBottomWidth: 1,
        borderColor: theme.palette.border,
      }}
      onPress={() => onItemSelected(item)}
      delayPressIn={100} // 添加延迟点击，单位：毫秒
    >
      <Orientation.Row
        style={{ justifyContent: 'center', gap: 8, width: 280 }}
      >
        {options.selected?.value === item.value && (
          <FontAwesome5 name="check" size={12} color={theme.palette.text} />
        )}
        <Typography.Default
          style={{
            fontSize: 18,
            fontFamily: theme.fonts.BOLD,
            textAlign: 'center',
          }}
        >
          {item.label}
        </Typography.Default>
      </Orientation.Row>
    </TouchableOpacity>
  );
}

方法2：替换为Pressable组件 #

Pressable是React Native官方推荐的新一代触摸交互组件，事件处理机制更灵活，不会默认拦截滚动事件，同时支持自定义点击反馈：

function ListItem({ item }: { item: Item }) {
  return (
    <Pressable
      key={item.value}
      style={{
        height: 50,
        justifyContent: 'center',
        alignItems: 'center',
        borderBottomWidth: 1,
        borderColor: theme.palette.border,
      }}
      onPress={() => onItemSelected(item)}
      // 可选：扩大点击响应区域，提升交互体验
      hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
    >
      <Orientation.Row
        style={{ justifyContent: 'center', gap: 8, width: 280 }}
      >
        {options.selected?.value === item.value && (
          <FontAwesome5 name="check" size={12} color={theme.palette.text} />
        )}
        <Typography.Default
          style={{
            fontSize: 18,
            fontFamily: theme.fonts.BOLD,
            textAlign: 'center',
          }}
        >
          {item.label}
        </Typography.Default>
      </Orientation.Row>
    </Pressable>
  );
}

补充说明 #

• 若使用方法1，可根据实际交互需求调整delayPressIn的数值（通常100-200毫秒即可）；
• Pressable组件还支持通过style属性动态设置点击状态样式，进一步优化交互反馈。

内容的提问来源于stack exchange，提问作者Isaac Tavares Caldas Gonçalves