javascript - 为什么我的 SectionList 有时只呈现一个部分？

Question

我在使用 SectionList 组件时遇到问题，有时它不会呈现所有部分，而是只呈现第一部分。我已经进行了一些调试并且可能找到了修复方法，但我不知道为什么它可以解决问题。

我的页面总是会呈现第一部分，但有时不会呈现第二部分。通过一些测试，我发现如果我将所有项目放在一个部分下，它总是会毫无问题地呈现。这个问题似乎只有在另一个部分包含很多项目时才会发生。

代码看起来像这样:

const data = {
   sections: [{
      name: "First",
      items: [{
         name: "Item 1",
         ...   
      }]
   },
   {
      name: "Second",
      items: [{
         name: "Item 20",
         ...   
      }]
   }]
};

public render(): JSX.Element {
   return (
       <SafeAreaView>
           <ScrollView refreshControl={this.getRefreshControl()}>
               <SectionList
                   renderItem={({item}) => this.renderItem(item)}
                   renderSectionHeader={(section) => this.renderHeader(section)}
                   sections={this.getSections(data)}
                   keyExtractor={(_, index) => String(index)}
               />
           </ScrollView>
       </SafeAreaView>
   );
}

getSections(data): SectionListData<any>[] {
    const sections = data.sections.map(section => {
        return {
            title: section.name,
            data: section.items
        };
    });

    return sections;
}

我做了一些测试并从 View 层次结构中删除了 ScrollView，它似乎已经解决了这个问题，但我无法重现它。我相信 ScrollView 有时会以某种方式导致 SectionList 出现问题，但我不知道为什么，也不知道如何证明这一点。有没有办法深入了解为什么会发生这个问题？或者以前有其他人遇到过这个问题吗？提前致谢!

Answer 1

SectionLists 有自己的滚动行为，由 VirtualizedList 提供.如果您将 SectionList 包裹在 ScrollView 中，滚动事件将被劫持，它会删除您想要的分段行为。

因为 SectionList 延迟加载，如果它无法访问滚动位置，那么它无法计算它是否超出 onEndReachedThreshold 并调用 onEndReached(以加载更多项目)。

SectionLists 和 FlatLists 被设计成可以无限滚动，所以你不应该将它们包裹在另一个 ScrollView 中。相反，如果您需要能够滚动浏览屏幕上的项目列表(无需延迟加载/分页)，我会将它们全部静态加载到 ScrollView 中。