Question

我尝试了什么 （如果您不在乎或需要信息，请跳过）

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

我尝试使用“翻转”transform scaleY实现（found here），这会导致列表从下往上呈现（这本来就太棒了）。但是，当您将翻转样式添加到部分列表，部分标题和会话行时，您应该这样做，这会导致所有标题都呈现在部分的底部而不是顶部。就UI / UX来说，这显然是不可取的。

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

问题

我已经决定做腿部工作，只是控制滚动到底部自己和这里的事情变得奇怪。无论出于何种原因，函数scrollToLocation都无效，并为我提供了红色死亡屏幕，说“ scrollToLocation不是函数”。我过去使用过RN FlatList组件的这个功能，它运行得很好。事实上它应该是found here上接受的方法。

此外，由于这些都扩展了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 }]
}

Answer 1

您正在使用的RN版本中{p} scrollToLocation无法使用SectionList。{p> {{1}}查看0.44 docs

我建议你运行RN更新，功能在0.45。如果出于任何原因，您的情况不是选项，则可以使用the changes required to make scrollToLocation work创建自定义RN版本。不过，我不推荐这种方法。

React Native SectionList scrollToLocation不是函数

1 个答案: