React Native SectionList scrollToLocation 在滚动视图中不起作用答案

【问题标题】：React Native SectionList scrollToLocation not working inside a scrollviewReact Native SectionList scrollToLocation 在滚动视图中不起作用
【发布时间】：2021-08-05 07:54:05
【问题描述】：

我正在尝试在滚动视图中拥有一个普通的信息视图和一个 sectionList。虽然视图被滚动，但当我尝试使用 scrollToLocation 滚动到选定的特定索引时，它不会滚动。此外，我尝试在 sectionList 中使用其他道具 onMomentumScrollEnd 也不起作用。当我删除 scrollView 时，它工作得很好。

<ScrollView>
                    <View style={{ height: 300, backgroundColor: 'rgba(0,0,0,0.2)' }} />
                    <View>
                        <SectionList
                            ref={(ref) => (this.contentRef = ref)}
                            stickySectionHeadersEnabled={false}
                            showsVerticalScrollIndicator={false}
                            sections={sectionListData}
                            keyExtractor={(item) => item.id}
                            onMomentumScrollEnd={() => {
                                this.setState({ onScrollFinished: true });
                                this.setViewableItem();
                            }}
                            onScrollEndDrag={() => {
                                this.setViewableItem();
                            }}
                            onViewableItemsChanged={this.onViewableItemsChanged}
                            renderItem={this.renderSectionItem}
                            renderSectionHeader={!this.props.isMenuLoading && this.renderSectionHeader}
                            initialNumToRender={500}
                            onScrollToIndexFailed={(info) => console.log('info', info)}
                        />
                    </View>
                </ScrollView>

setActiveIndex(key) {
        this.setState({ activeIndex: key, updatedAt: Date.now() });
        if (isValidElement(this.headerRef)) {
            this.headerRef.scrollToIndex({ index: key, animated: true, viewPosition: 0.5 });
        }
        if (isValidElement(this.contentRef)) {
            this.contentRef.scrollToLocation({
                sectionIndex: key,
                itemIndex: 0,
                animated: false,
                viewPosition: 0
            });
        }
    }

【问题讨论】：

标签： react-native

【解决方案1】：

看来这是一个长期存在的问题，似乎没有人能回答。从 2019 年 6 月起，react-native 存储库上的 Issue #25295 报告了此行为，并在 3 个月后自动关闭为陈旧。 Issue #31136 报告了同样的问题，并且可能还有其他参考。

该行为似乎与scroll* 命令函数的底层实现有关。具体来说，调用堆栈如下所示：

scrollToIndex 在VirtualizedList
scrollToLocation 在VirtualizedSectionList
scrollToLocation 在SectionList

失败的位是VirtualizedList 尝试调用this._scrollRef.scrollTo，当SectionList 嵌套在ScrollView 或其他可滚动组件（如FlatList）中时显然没有定义。

我的建议是重构布局，使得在同一轴上的其他可滚动项下没有嵌套的可滚动项。

【讨论】：