React Native SectionList scrollToLocation 不是一个函数

Question

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

我正在使用 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 }]
}

Answer 1

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

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