React Native中ScrollView嵌套多FlashList滚动异常问题求助

问题现象 #

• 不限制FlashList高度时，组件会一次性渲染所有条目，完全失去懒加载效果
• 用固定高度的View包裹FlashList后，第一个列表滚动到底部时，外层ScrollView的整体滚动会停止

原代码：

<ScrollView
  style={{ flex: 1 }}
  scrollEnabled={outerScrollEnable}
  nestedScrollEnabled
  ref={scrollViewRef}
>
  <View style={{ height: height, backgroundColor: "#333" }}>
    <FlashList
      data={list}
      keyExtractor={keyExtractor}
      renderItem={renderItem}
      estimatedItemSize={68}
      // style={{ flex: 1 }}
      scrollEnabled={goodsScrollEnable}
      nestedScrollEnabled
      onEndReached={handleGoodsEndReached}
      renderScrollComponent={renderScrollComponent}
    />
  </View>
  <View style={{ height, backgroundColor: "#fff" }}>
    <FlashList
      data={list2}
      keyExtractor={keyExtractor}
      renderItem={renderItem}
      estimatedItemSize={68}
      // style={{ flex: 1 }}
      scrollEnabled={recommendScrollEnable}
      nestedScrollEnabled
      renderScrollComponent={renderScrollComponent}
    />
  </View>
</ScrollView>

期望效果 #

• 所有条目实现懒加载
• 滚动过程流畅连贯

解决方案 #

核心思路是让外层ScrollView统一接管滚动逻辑，避免嵌套滚动冲突，同时保证FlashList的懒加载机制正常工作。

修改步骤 #

1. 禁用内部FlashList的滚动：将两个FlashList的scrollEnabled设为false，移除nestedScrollEnabled属性，消除嵌套滚动的冲突问题。
2. 移除固定高度的包裹View：删除包裹FlashList的带固定高度的View，让FlashList自适应内容高度，同时依靠estimatedItemSize维持懒加载能力。
3. 保留关键懒加载配置：确保estimatedItemSize设置准确，保留onEndReached回调实现加载更多的逻辑。

修改后的代码：

<ScrollView
  style={{ flex: 1 }}
  ref={scrollViewRef}
>
  <FlashList
    data={list}
    keyExtractor={keyExtractor}
    renderItem={renderItem}
    estimatedItemSize={68}
    scrollEnabled={false}
    onEndReached={handleGoodsEndReached}
    renderScrollComponent={renderScrollComponent}
  />
  <FlashList
    data={list2}
    keyExtractor={keyExtractor}
    renderItem={renderItem}
    estimatedItemSize={68}
    scrollEnabled={false}
    renderScrollComponent={renderScrollComponent}
  />
</ScrollView>

额外优化建议 #

如果列表条目高度不固定，可以通过onLayout事件获取条目的真实高度，动态更新estimatedItemSize，进一步提升懒加载的准确性和滚动流畅度。

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