Question

我使用的是ReactNative的FlatList组件，它运行正常。现在我想在用户输入新元素/评论时将其滚动到底部。

<FlatList style={styles.commentList}
    data={commentList}
    keyExtractor={(item, index) => index}
    renderItem={this.renderRow.bind(this)}
/>

现在每当用户输入新评论时，都会更新commentList并且FlatList也会刷新，但我想滚动到底部，以便用户可以阅读最新发布的评论。

Answer 1

检查一下：它不是我的解决方案，但我使用这种方法。

https://exp.host/@xavieramoros/snack-SyN4FJikz 源代码： https://github.com/xavieramoros/flatlist-initialScrollIndexIssue/blob/master/App.js 22世博会 - RN 0.49

非常感谢https://expo.io/@xavieramoros

已修改：如果您只想滚动到底部，则可以在新RN中使用scrollToEnd（https://facebook.github.io/react-native/docs/flatlist.html#scrolltoend）。像

一样使用它

<FlatList
        ref={ (ref) => { this.flatList = ref; }}
        data={this.data}
        renderItem={ this.renderItem }
        keyExtractor={ this.keyExtractor}
        onScroll={ this.scrollToEnd}
      />
    ......

并在您的方法中

scrollToEnd = () => {
    const wait = new Promise((resolve) => setTimeout(resolve, 0));
    wait.then( () => {
        this.flatList.scrollToEnd({ animated: true });
    });
}

Answer 2

尝试使用反向属性为true的FlatList。（还可以反转数据数组）由于Flatlist是倒置的，因此新数据将添加到第一个位置，并且由于此更新，flatlist会自动滚动到第一个位置，在您的情况下，它是底部位置

添加新元素后的FlatList滚动

2 个答案: