Question

我正在尝试使用<Flastlist />

在React原生中创建聊天

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

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

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

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

如何初步滚动到底部？

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

Answer 1

我遇到了同样的问题，然后我开始使用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>`

Answer 2

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

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

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

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

Answer 3

我猜RN不能猜测你的布局，所以它无法知道它需要多少＆＃34;移动＆＃34;。根据文档中的滚动方法，您可能需要实现getItemLayout函数，因此RN可以告诉它需要滚动多少。

https://facebook.github.io/react-native/docs/flatlist.html#scrolltoend

Answer 4

将initialScrollIndex设置为数据集的长度-1。

即

<Flatlist
data={dataSet}
initialScrollIndex={dataSet.length - 1}
/>

Answer 5

请问是否要让FlatList在初始渲染时滚动到底部。刚刚在您的FlatList中添加了反向= {-1}。我一直在挣扎着滚动到底部几个小时，但是最后却倒了= {-1}。不需要考虑使用getItemLayout和initialScrollIndex或其他方法动态测量FlatList项的高度。

Answer 6

<平面列表 contentContainerStyle = {{flex：1，justifyContent：'flex-end'}}

Answer 7

我也为此付出了努力，发现对我而言，无故障渲染的最佳解决方案是：

使用inverted={-1}道具
在我的情况下，data={MyArrayofMessages.reverse()}使用reverse（）javascript函数用data={this.state.messages.reverse()}反转数组中消息对象的顺序。

非常容易，并且可以即时渲染！

Answer 8

使用inverted={1} 并使用JS 反向功能 反向您的数据。它对我有用

Answer 9

如果要显示消息反转，请在平面列表中将“inverted”设置为true。

<Flatlist
data={messageData}
inverted={true}
horizontal={false}
/>

如果只想滚动到最后一条消息，可以使用initialScrollIndex

<Flatlist
data={messageData}
initialScrollIndex={messageArray.length - 1}
horizontal={false}
/>

Answer 10

我找到了一个 100% 对我有用的解决方案

将引用 flatListRef 添加到我的平面列表：

<Flatlist
     reference={(ref) => this.flatListRef = ref}
     data={data}
     keyExtractor={keyExtractor}
     renderItem={renderItem}
/>

然后每当您想自动滚动到列表底部时，请使用：

this.flatListRef._listRef._scrollRef.scrollToEnd({ animating: true });

是的，您应该访问元素 _listRef 然后 _scrollRef 然后调用 scrollToEnd

react-native 0.64.1
响应 17.0.2

将本机平面列表初始滚动到底部

10 个答案: