在 SectionList 上执行 scrollToLocation 时崩溃

Posted 2023-02-16

【中文标题】在 SectionList 上执行 scrollToLocation 时崩溃

【英文标题】：Crash when doing scrollToLocation on SectionList

【发布时间】：2019-06-05 09:14:57

【问题描述】：

我们的应用中有一个边缘案例。在呈现 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
        />

我试图用谷歌搜索原因，但没有成功，只找到过时和关闭的问题而没有解决方案。这发生在其他人身上吗？你是怎么修的？

更新： 我们提出了一个恒定项目大小的解决方案，它还考虑了可访问性比例因子。所以我们有一个可以在getItemLayout 中使用的项目和标题大小。一切正常，但SectionList 有问题。当我们滚动到较低的部分时，列表本身就很跳跃，没有任何交互。 到目前为止，我们最好的解决方案是在本机代码中自己构建节列表并使用它而不是 RN 列表。

【参考方案1】：

您收到此错误是因为 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 /*/ 您可以捕获错误，然后在此处决定如何处理它。

---

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

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

【讨论】：

我正在使用您已经评论了一段时间的库进行测试，但我得到了同样的错误。另一个问题是我们的项目高度可能不同，这取决于标题的长度。其他分隔符、节标题和列表标题是恒定高度。我会试试onScrollToIndexFailed。

从componentDidMount 调用scrollToLocation（使用正确的getItemLayout）不起作用，但添加延迟就可以了！谢谢