在 SectionList 上执行 scrollToLocation 时崩溃

Question

我们的应用中有一个边缘案例。 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 找出原因，但没有找到解决方案的过时和已关闭问题。这发生在其他人身上吗？你是怎么修好的？

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

Answer 1

您收到此错误是因为 scrollToIndex 失败并且您尚未实施 getItemLayout 或 onScrollToIndexFailed

getItemLayout 在部分列表中的设置并不是很有趣，但是这个媒体 post 介绍了如何设置 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 更容易设置你可以添加道具 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);
};

在 SectionList 上执行 scrollToLocation 时崩溃

Crash when doing scrollToLocation on SectionList

jsx

reactjs

react-native

react-native-sectionlist