同方向嵌套VirtualizedList编程滚动失效问题求助

问题场景 #

1. 初始将SectionList嵌套在ScrollView中，触发报错：

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

对应代码：

<ScrollView>
  <HomeHeader
    QuickAccess={QuickAccess}
    handleFilterPresentModalPress={handleFilterPresentModalPress}
  />
  <MenuTab sectionListData={sectionListData} /> {/* SectionList */}
</ScrollView>

2. 改用FlatList作为容器后，调用SectionList的scrollToLocation方法时触发新报错：

scrollToLocation should not be called while scrolling is in progress

滚动相关代码：

const scrollToSection = (sectionTitle) => {
  if (sectionListRef.current) {
    const sectionIndex = data.findIndex(
      (section) => section.title === sectionTitle
    );
    if (sectionIndex >= 0) {
      sectionListRef.current.scrollToLocation({
        sectionIndex: sectionIndex,
        itemIndex: 0,
        viewOffset: 0,
        animated: true,
      });
    }
  }
};

<TouchableOpacity onPress={() => scrollToSection("Sides")}>
  <Text>Scroll to Section 2, Item 2</Text>
</TouchableOpacity>

解决方案 #

方案1：移除嵌套滚动容器（推荐） #

不需要用FlatList或ScrollView嵌套SectionList，直接将HomeHeader作为SectionList的ListHeaderComponent，用单个SectionList作为页面主容器，从根源避免嵌套滚动冲突：

<SectionList
  ref={sectionListRef}
  sections={sectionListData}
  ListHeaderComponent={
    <HomeHeader
      QuickAccess={QuickAccess}
      handleFilterPresentModalPress={handleFilterPresentModalPress}
    />
  }
  renderSectionHeader={({ section }) => (
    <Text>{section.title}</Text>
  )}
  renderItem={({ item }) => (
    <Text>{item.name}</Text>
  )}
  keyExtractor={(item, index) => item.id + index}
/>

这样既解决了第一个嵌套报错，也不会出现滚动时调用scrollToLocation的冲突问题。

方案2：处理嵌套滚动的状态冲突（若必须保留嵌套结构） #

如果业务需求必须保留FlatList嵌套SectionList的结构，需要监听FlatList的滚动状态，确保在FlatList停止滚动后再调用SectionList的滚动方法：

1. 添加状态跟踪滚动状态：

const [isFlatListScrolling, setIsFlatListScrolling] = useState(false);

2. 给FlatList添加滚动监听：

<FlatList
  nestedScrollEnabled={true}
  onScroll={() => setIsFlatListScrolling(true)}
  onScrollEndDrag={() => setIsFlatListScrolling(false)}
  onMomentumScrollEnd={() => setIsFlatListScrolling(false)}
  scrollEventThrottle={16}
  data={dummyData}
  keyExtractor={(item, index) => `key-${index}`}
  ListHeaderComponent={
    <HomeHeader
      QuickAccess={QuickAccess}
      handleFilterPresentModalPress={handleFilterPresentModalPress}
    />
  }
  ListFooterComponent={<View style={{ height: 10 }}></View>}
  renderItem={({ item, index }) => (
    <MenuTab sectionListData={sectionListData} /> {/* SectionList */}
  )}
/>

3. 修改scrollToSection方法，等待滚动停止后执行：

const scrollToSection = async (sectionTitle) => {
  if (isFlatListScrolling) {
    // 等待FlatList停止滚动
    await new Promise(resolve => {
      const timer = setInterval(() => {
        if (!isFlatListScrolling) {
          clearInterval(timer);
          resolve();
        }
      }, 50);
    });
  }

  if (sectionListRef.current) {
    const sectionIndex = data.findIndex(
      (section) => section.title === sectionTitle
    );
    if (sectionIndex >= 0) {
      sectionListRef.current.scrollToLocation({
        sectionIndex: sectionIndex,
        itemIndex: 0,
        viewOffset: 0,
        animated: true,
      });
    }
  }
};

另外，也可以考虑禁用FlatList的滚动（设置scrollEnabled={false}），让SectionList完全接管滚动逻辑，这样也能避免冲突，但需要确保FlatList的内容高度不会超出屏幕。

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