反应原生平面列表初始滚动到底部

Question

我正在尝试使用 <Flatlist /> 在 React Native 中创建聊天

与 WhatsApp 和其他聊天应用程序一样，消息从底部开始。

从我的 API 获取消息后，我调用

this.myFlatList.scrollToEnd({animated: false});

但它在中间的某个地方滚动，有时底部的项目较少，有时它什么也不做。

如何最初滚动到底部？

我的聊天消息有不同的高度，所以我无法计算高度。

原文由 yooouuri 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我有类似的问题。如果您想让您的聊天消息从底部开始，您可以将“inverted”设置为 true，并以相反的方向显示您的消息和时间标签。

在此处查看 FlatList 的“倒置”属性。 https://facebook.github.io/react-native/docs/flatlist#inverted

如果你想让你的聊天消息从顶部开始，这就是我想要实现的。我在 FlatList 中找不到解决方案，因为正如您所说，高度不同，我无法使用 getItemLayout 使“scrollToEnd”以一种奇怪的方式表现。

我遵循@My Mai 提到的方法，改用 ScrollView 并在 setTimeout 函数中执行 scrollToEnd({animated: false}) 。此外，我添加了一个状态来隐藏内容，直到 scrollToEnd 完成，所以用户不会看到任何滚动。

原文由 CAIsoul 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我和你遇到了同样的问题，然后我开始使用 ScrollView。它是固定的：

 componentDidMount() {
  setTimeout(() => {
    this.scrollView.scrollToEnd();
  });
}

<ScrollView ref={(ref) => { this.scrollView = ref; }} style={styles.messages}>
      {
        messages.map((item, i) => (
          <Message
            key={i}
            direction={item.userType === 'banker' ? 'right' : 'left'}
            text={item.message}
            name={item.name}
            time={item.createdAt}
          />
        ))
      }
    </ScrollView>`

原文由 My Mai 发布，翻译遵循 CC BY-SA 3.0 许可协议