@gorhom/bottom-sheet固定高度下列表滚动实现方案问询

你遇到的核心问题是@gorhom/bottom-sheet内部的FlatList没有获得足够的可滚动空间，嵌套ScrollView又引发滚动冲突。以下是两种可行的解决方案：

方案一：配置BottomSheet内容容器，让FlatList自适应滚动 #

@gorhom/bottom-sheet的内部内容默认不会自动分配剩余空间，我们可以通过contentContainerStyle给内容容器设置flex: 1，同时让FlatList占据可用空间：

修改BottomSheet组件的属性：

<BottomSheet
  ref={bottomSheetRef}
  index={1}
  snapPoints={snapPoints}
  onChange={handleSheetChanges}
  contentContainerStyle={{ flex: 1 }} // 添加这行
>
  <View style={styles.bottomSheet}>
    {/* 原有头部内容 */}
    <FlatList
      style={styles.list}
      data={data}
      renderItem={renderItem}
      keyExtractor={(item) => item.label}
      contentContainerStyle={{ flexGrow: 1 }} // 添加这行
    />
  </View>
</BottomSheet>

同时调整styles里的bottomSheet样式，确保它能填充BottomSheet的内容容器：

bottomSheet: {
  backgroundColor: 'white',
  borderTopLeftRadius: 20,
  borderTopRightRadius: 20,
  paddingHorizontal: 5,
  paddingBottom: 10,
  flex: 1, // 添加flex:1
},

这样FlatList会自动获得BottomSheet内的剩余空间，内容超出时就能正常滚动，无需调整弹窗的snapPoints高度。

方案二：替换外层FlatList为ScrollView，避免嵌套滚动冲突 #

嵌套FlatList容易导致滚动手势冲突，你可以把外层的FlatList换成ScrollView，内部展开项的内容用普通View循环渲染，让整个弹窗内容统一滚动：

修改部分代码如下：

// 导入ScrollView
import { View, Text, StyleSheet, ScrollView, TouchableOpacity, LayoutAnimation } from 'react-native';

// 替换原有FlatList为ScrollView
<ScrollView style={styles.list}>
  {data.map((item, index) => renderItem({ item, index }))}
</ScrollView>

// 修改renderItem里的展开内容，把嵌套FlatList换成View循环
{isExpanded && (
  <View>
    {expandedData.map((subItem) => (
      <>
        <TouchableOpacity style={styles.rowContainer}>
          <View style={styles.row}>
            <Text style={styles.rowLabel}>{subItem.label}</Text>
            <RightArrowIcon style={styles.rowArrowIcon} />
          </View>
        </TouchableOpacity>
        {subItem.label === 'List of Subspaces' && <View style={styles.separator} />}
      </>
    ))}
  </View>
)}

这个方案彻底避免了嵌套滚动的问题，整个弹窗内容由ScrollView统一管理滚动，适合内容层级不复杂的场景。

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