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;
}

我做了一些测试，并从视图层次结构中删除了ScrollView，它似乎已经解决了该问题，但我无法重现该问题。我相信ScrollView有时会以某种方式导致SectionList出现问题，但是我不知道为什么，也不知道如何证明这一点。有没有办法深入了解此问题的发生原因？还是以前有人遇到过此问题？预先感谢！

Answer 1

SectionList具有VirtualizedList提供的自己的滚动行为。如果将SectionList包装在ScrollView中，则滚动事件将被劫持，并删除所需的分段行为。

由于SectionList延迟加载，如果它无法访问滚动位置，则无法计算其是否超出onEndReachedThreshold并调用onEndReached（以加载更多项目）。

SectionLists和FlatLists被设计为具有无限滚动，因此您永远不要将它们包装在另一个ScrollView中。相反，如果您需要能够滚动浏览屏幕上的项目列表（而不需要延迟加载/分页），那么我会将它们全部静态加载到ScrollView中。

为什么我的SectionList有时仅呈现一个部分？

1 个答案: