自定义Animated底部抽屉内React Native FlatList无法滚动问题求助

核心问题根因 #

• 外层绝对定位的抽屉容器未设置明确高度，导致内部Flex布局无法计算可用空间，FlatList的flexGrow属性失效
• SafeAreaView未设置flex:1，Flex布局链路未打通
• PanGestureHandler与FlatList的垂直滚动手势存在冲突，滚动事件被抽屉手势拦截
• 为FlatList硬编码高度与底部内边距属于临时适配方案，不符合Flex布局规范

修复步骤 #

步骤1：补全Flex链路高度定义 #

1. 为外层Animated容器增加屏幕高度作为固定高度，绝对定位容器必须有明确高度才能让内部Flex正常计算
2. 为SafeAreaView添加flex:1样式，打通从外层容器到内容容器的Flex链路

步骤2：移除FlatList的硬编码适配 #

删除HeroFlatList中原有的硬编码height、paddingBottom属性，改为flex:1让FlatList自动占满剩余可用空间

步骤3：修复手势冲突 #

为PanGestureHandler增加手势偏移阈值配置，小范围垂直滑动优先响应FlatList的滚动事件，只有超过阈值的滑动才触发抽屉的收起/展开逻辑

核心修改代码片段 #

1. 外层容器样式修改 #

// Animated.View行内样式新增height属性
<Animated.View
  style={[styles.container, { top: height * 0.7, height: height }, animatedStyle]}
>
  {/* 补全SafeAreaView的样式 */}
  <SafeAreaView style={styles.wrapper}>

// styles中新增wrapper样式
const styles = StyleSheet.create({
  // 原有样式保留
  wrapper: {
    flex: 1,
  }
})

2. FlatList样式修改 #

const HeroFlatList = styled(FlatList).attrs({
  contentContainerStyle: {
    padding: 14,
  },
})`
  flex: 1;
`;

3. 手势冲突修复 #

<PanGestureHandler 
  onGestureEvent={gestureHandler}
  activeOffsetY={[-20, 20]} // 垂直滑动超过20px才触发抽屉手势
  failOffsetX={[-10, 10]} // 水平滑动超过10px则不触发抽屉手势
>

效果验证 #

修改后抽屉的滑动逻辑不受影响，FlatList可以根据内容高度正常滚动，无需硬编码任何固定尺寸，完全基于Flex布局实现自适应。

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