React-native FlatList 滚动到聊天应用程序的底部

Question

我制作了一个聊天应用程序，并使用平面列表来呈现消息。但问题是每次加载页面时都尝试滚动到屏幕末尾，但失败了。我尝试过反转道具，但什么也没发生，只是列表反转了。

甚至用 ref 让它自动滚动到底部，但什么也没发生。

<FlatList
  ref="flatList"
  onContentSizeChange={() =>
    this.refs.flatList.scrollToEnd()}
  contentContainerStyle={{
    marginBottom:
      verticalScale(200)
  }}
  style={styles.list}
  data={this.state.messages}
/>

如何让它在渲染时滚动到屏幕底部或滚动到消息的最后一个索引？

（更新）

<Content/>这是我使用的属于 native-base 的组件的问题。删除并用 a 替换它后，<View/>它工作得很好。此外，对于基于聊天的应用程序，inverted其中的道具Flatlist是以正确的方式实现的。

我在下面的答案中添加了我设法滚动的方式。如果您只想让应用程序显示列表中的最后一项并保留在那里，您可以使用inverted

Answer 1

你应该像这样使用 ref ：

    export default class MyAwesomeComponent extends React.Component {
      FlatListRef = null; // add a member to hold the flatlist ref
    
      render() {
        return (
          <FlatList
            ref={ref => (this.FlatListRef = ref)} // assign the flatlist's ref to your component's FlatListRef...
            onContentSizeChange={() => this.FlatListRef.scrollToEnd()} // scroll it
            contentContainerStyle={{marginBottom: verticalScale(200)}}
            style={styles.list}
            data={this.state.messages}
          />
        );
      }
    }