添加新元素后滚动平面列表

Question

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

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

现在，每当用户输入新评论时，评论列表都会更新，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

已编辑：如果您只想滚动到底部，那么 scrollToEnd （https://facebook.github.io/react-native/docs/flatlist.html#scrolltoend） 在新 RN 中可用。像这样使用它

<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

尝试使用

倒置道具的平面列表为真。（不妨反转数据数组）由于平面列表是反转的，因此新数据将添加到第一个位置，并且由于此更新，平面列表会自动滚动到第一个位置，在您的情况下是底部位置