reactjs - 在SectionList上执行scrollToLocation时崩溃

我们的应用程序中有一个边缘保护套。呈现UI后，用户尝试滚动到某个部分，它将引发scrolltoindex should be used in conjunction with getitemlayout or on scrolltoindex failed。现在，只有当他在UI渲染后立即执行此操作时，才会发生这种情况。

_scrollToSection = index => {
    setTimeout(() => {
        this.list.scrollToLocation({
            animated: true,
            itemIndex: -1,
            sectionIndex: index,
            viewPosition: 0
        });
    }, 150);
};

节列表渲染:

        <SectionList
            sections={this.props.sections}
            extraData={this.props.subscriber}
            ref={ref => {
                if (ref) {
                    this.list = ref;
                }
            }}
            automaticallyAdjustContentInsets={true}
            contentInsetAdjustmentBehavior={'automatic'}
            windowSize={100}
            ListHeaderComponent={this.props.header || null}
            ItemSeparatorComponent={() => (
                <Separator
                    style={[mediumStyle.separatorEnd, { backgroundColor: IOS_GREY_02_03 }]}
                />
            )}
            renderSectionFooter={() => <View style={{ height: 17 }} />}
            keyExtractor={(item, index) => index}
            removeClippedSubviews={false}
            stickySectionHeadersEnabled={true}
            renderSectionHeader={({ section }) => (
                <SectionTitle title={section.title} theme={this.props.theme} />
            )}
            renderItem={this._renderItem}
            onEndReachedThreshold={0}
            onEndReached={() => HapticFeedback.trigger()}
            scrollEventThrottle={16}
        />

我尝试通过Google搜索原因，但仅找到过时和 Unresolved 问题而没有解决方案，但未成功。这件事发生在别人身上吗？您是如何解决的？

更新:
我们提出了一个固定项目大小的解决方案，该解决方案还考虑了可访问性比例因子。因此，我们有一个项目和 header 大小，可以在getItemLayout中使用。所有工作均应正常进行，但SectionList出现故障。当我们滚动到下半部分时，列表本身是跳跃的，没有任何交互。
到目前为止，我们最好的解决方案是用 native 代码自己构建节列表，然后使用它代替RN列表。

最佳答案

您收到此错误是因为scrollToIndex失败，并且您尚未实现getItemLayout或onScrollToIndexFailed
章节列表中的getItemLayout设置并不是很有趣，但是这篇中篇文章介绍了如何做https://medium.com/@jsoendermann/sectionlist-and-getitemlayout-2293b0b916fb

他们建议使用react-native-section-list-get-item-layout来计算布局https://github.com/jsoendermann/rn-section-list-get-item-layout的大小
onScrollToIndexFailed易于设置，您可以添加prop onScrollToIndexFailed={(info) => { /* handle error here /*/ }}。您可以捕获错误，然后决定如何在此处处理它。

我还要添加一个检查，以确保在调用this.list函数之前，您对scrollToLocation的引用存在。这样的事情。

_scrollToSection = index => {
    setTimeout(() => {
      if (this.list) {
        this.list.scrollToLocation({
            animated: true,
            itemIndex: -1,
            sectionIndex: index,
            viewPosition: 0
        });
      }
    }, 150);
};

关于reactjs - 在SectionList上执行scrollToLocation时崩溃，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54129743/