如何在FlatList中禁用屏幕边缘的横向滚动？

当全屏宽高的水平FlatList存在时，左侧边缘的滑动手势会被FlatList拦截，导致无法调出左侧Drawer。以下是几个更优雅的解决方案：

方案一：动态控制FlatList的滑动开关（推荐） #

通过监听触摸起始位置，动态开启/禁用FlatList的滑动功能，让左侧边缘的手势留给Drawer处理：

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

// 组件内部
const [scrollEnabled, setScrollEnabled] = useState(true);

const panResponder = useRef(
  PanResponder.create({
    onStartShouldSetPanResponder: (evt) => {
      // 设定左侧20px为Drawer触发区域，可根据需求调整宽度
      setScrollEnabled(evt.nativeEvent.pageX >= 20);
      return false; // 不接管手势，让系统分配给对应组件
    },
  })
).current;

return (
  <View {...panResponder.panHandlers}>
    <FlatList
      scrollEnabled={scrollEnabled}
      data={_slides}
      renderItem={({ item }) => <Item item={item} />}
      bounces={false}
      horizontal
      pagingEnabled
      showsHorizontalScrollIndicator={false}
      snapToAlignment="center"
    />
  </View>
);

方案二：调整布局隔离触摸区域 #

通过padding和负margin让FlatList视觉上全屏，但左侧边缘区域不响应FlatList的触摸：

<View style={{ paddingLeft: 15 }}>
  <FlatList
    contentContainerStyle={{ marginLeft: -15 }}
    data={_slides}
    renderItem={({ item }) => <Item item={item} />}
    bounces={false}
    horizontal
    pagingEnabled
    showsHorizontalScrollIndicator={false}
    snapToAlignment="center"
  />
</View>

这个方案无需额外手势逻辑，仅通过布局调整实现，左侧15px区域不属于FlatList的触摸范围，Drawer可正常捕获该区域的滑动手势。

方案三：针对RN导航抽屉的优化（若使用@react-navigation/drawer） #

如果项目基于@react-navigation/drawer，可以结合抽屉状态控制FlatList滑动：

import { useDrawerStatus } from '@react-navigation/drawer';

// 组件内部
const drawerStatus = useDrawerStatus();

return (
  <FlatList
    scrollEnabled={drawerStatus !== 'opening'}
    data={_slides}
    renderItem={({ item }) => <Item item={item} />}
    bounces={false}
    horizontal
    pagingEnabled
    showsHorizontalScrollIndicator={false}
    snapToAlignment="center"
  />
);

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