我尝试过的方法(如果您不在乎或需要此信息,请跳过)

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

我尝试使用“翻转” transform scaleY实现(found here),它使列表从下往上呈现(这真是太甜了)。但是,当您将翻页样式添加到部分列表,部分标题和对话行时,就像您应该做的那样,这会使所有标题显示在部分底部而不是顶部。就UI / UX而言,这显然是不可取的。

例如:如果“应该”这样渲染... [section-title |留言|留言|消息],它将最终像这样在屏幕上呈现... [消息|留言|留言|标题]



问题

从那以后,我决定做腿部动作,只是控制滚动使自己跌倒,这就是奇怪的地方。无论出于何种原因,函数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 }]
}

最佳答案

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

我建议您运行RN更新,此功能位于0.45中。如果由于某种原因不是您的选择,则可以使用the changes required to make scrollToLocation work创建自定义RN构建。不过,我不推荐这种方法。

关于javascript - React Native SectionList scrollToLocation不是函数,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45203325/

10-10 00:43