React Native SectionList scrollToLocation 不是一个函数

Posted 2023-02-23

【中文标题】React Native SectionList scrollToLocation 不是一个函数

【英文标题】：React Native SectionList scrollToLocation is not a function

【发布时间】：2017-12-25 11:29:25

【问题描述】：

我尝试过的 （如果您不关心或不需要信息，请跳过）

我正在使用 RN SectionList 并且正在运行 RN V-0.44.0。我正在尝试使用此部分列表在我的应用程序中创建一个简单的聊天窗口，并且我需要能够在有新内容出现时滚动到底部。最近我正在使用 react-native-reversed-flat-list 组件found here ，效果非常好，但后来我决定我需要显示日期部分的标题，而不是仅仅泄露所有消息。

我尝试使用“翻转”transformscaleY 实现 (found here)，它会导致列表自下而上呈现（这将非常甜蜜）。但是，当您将翻转样式添加到部分列表、部分标题和对话行时，就像您应该做的那样，它会导致所有标题呈现在部分的底部而不是顶部。就 UI/UX 而言，这显然是不可取的。

例如：如果它“应该”像这样呈现... [section-title |留言 |留言 | message]，它最终会像这样在屏幕上呈现... [message |留言 |留言 |部分标题]

---

问题

从那以后我决定做腿部工作，只是控制滚动到底部，这就是事情变得奇怪的地方。无论出于何种原因，函数scrollToLocation 无法正常工作，并给我红屏死机说“scrollToLocation 不是函数”。我过去曾将此功能与 RN FlatList 组件一起使用，它工作得很好。事实上，它应该是this component 上可接受的方法。

另外，由于它们都扩展了 VirtualizedList 组件，我应该能够使用 scrollToEnd 函数，但我得到了同样的东西。

我真的不想保存外容器和内容器的高度onLayout然后用差值滚动到ScrollView的底部...这种方式优雅多了.

这是我的代码...

renderConversation() 
    if(this.state.dataSource.length > 0) 
        return (
            <View style= height: (this.props.display.height - headerBarHeight - 35) >
                <SectionList
                    ref=ref =>  this.messagesSectionListRef = ref; 
                    sections=this.state.dataSource
                    stickySectionHeadersEnabled=false
                    showsVerticalScrollIndicator=false
                    showsHorizontalScrollIndicator=false
                    renderItem=this.renderMessageRow.bind(this)
                    keyExtractor=(item, index) => `message_$index`
                    renderScrollComponent=this.renderScrollComponent.bind(this)
                    renderSectionHeader=this.renderMessageSectionHeader.bind(this)
                    onContentSizeChange=(newWidth, newHeight) => 
                        let sectionIndex = (this.state.dataSource.length - 1);
                        let itemIndex = this.state.dataSource[sectionIndex].data.length - 1;

                        this.messagesSectionListRef.scrollToLocation( 
                            itemIndex,
                            sectionIndex,
                            animated: false,
                        );
                    
                    style=[
                        styles.conversationBox,
                         width: this.props.display.width - mainContainerSideMargins 
                    ] />
            </View>
        );

     else 
        return null;
    



//Flip style implementation
flip: 
    transform: [ scaleY: -1 ]

【问题讨论】：

GoreDefex，你解决了这个问题吗？你能分享你的代码示例吗？使用 scrollToLocation、scrollToEnd 方法的正确方法是什么？我试图做完全相同的聊天页面，我也有这个问题。我使用 react-native 0.46.4

【参考方案1】：

scrollToLocation 在您使用的 RN 版本中不适用于 SectionList。检查0.44 docs

我建议您运行 RN 更新，该功能在 0.45 中就有。如果出于任何原因这不是您的选择，您可以使用the changes required to make scrollToLocation work 创建自定义 RN 构建。不过，我不推荐这种方法。

【讨论】：

谢谢。出于某种原因，当我昨晚检查时，我以为我在 0.44 文档中看到了该功能。我的错。 0.45 破坏了我的整个应用程序，我花了一个晚上来追踪错误发生的原因。

这行得通，但是我也不能使用它的包装组件VirtualizedList 中的 scrollToEnd 函数。知道为什么吗？