React Native中嵌套FlatList如何设置height或maxHeight实现滚动？

核心原因 #

父FlatList作为滚动容器默认会优先消费触摸滚动事件，导致内部固定高度的子FlatList无法拿到滚动权限，这是嵌套滚动场景下的常见问题，不需要替换为ScrollView，通过以下属性配置即可解决。

必设配置项 #

• 给子FlatList显式添加nestedScrollEnabled={true}属性，开启嵌套滚动权限，允许子滚动容器在父滚动容器内消费滚动事件
• 显式声明scrollEnabled={true}，嵌套场景下该属性可能被父容器继承为false，显式声明可以避免异常
• 确认子FlatList设置的固定高度 小于其渲染内容的总高度：如果内容总高度低于你设置的固定高度，列表本身就不需要滚动，自然不会出现滚动指示器也无法滚动

代码示例 #

// 父FlatList内部渲染子FlatList的参考写法
<FlatList
  data={parentDataSource}
  renderItem={({item}) => (
    <View>
      <Text>{item.groupName}</Text>
      {/* 固定高度的子FlatList */}
      <FlatList
        data={item.subList}
        renderItem={({item: subItem}) => <Text style={{padding: 12}}>{subItem.text}</Text>}
        keyExtractor={(subItem, index) => `sub_${index}`}
        // 核心滚动配置
        nestedScrollEnabled={true}
        scrollEnabled={true}
        // 你设置的固定高度
        style={{height: 250}}
        // 滚动条配置
        showsVerticalScrollIndicator={true}
      />
    </View>
  )}
  keyExtractor={(item, index) => `parent_${index}`}
  // Android平台异常时可以给父FlatList也开启嵌套滚动
  // nestedScrollEnabled={true}
/>

异常排查 #

• 测试阶段可以给子FlatList添加临时背景色，确认你设置的固定高度确实生效，没有被父容器的flex布局覆盖
• 不要给子FlatList设置flex: 1，否则固定高度会失效，列表会被撑到和内容等高
• iOS平台如果内容高度足够但滚动条不显示，可以额外添加alwaysBounceVertical={true}属性触发滚动条渲染

内容的提问来源于stack exchange，提问作者Ivan Yufen Stefanus