Question

我在聊天应用程序中将垂直FlatList颠倒了，它在底部显示最新消息，在顶部显示最旧消息（与所有其他聊天应用程序一样）
我的问题是，当我向列表底部添加新消息时，FlatList会自动滚动到列表底部！
我需要做的就是防止这种情况下滚动

这是我的FlatList：

<FlatList
  inverted
  style={{flex: 1}}
  data={this.data}
  keyExtractor={(item, index) => item.id}
  renderItem={this.renderItem}
  removeClippedSubviews={Platform.OS == 'ios' ? false : true}
  onViewableItemsChanged={this.handleViewableItemsChanged }
  viewabilityConfig={{viewAreaCoveragePercentThreshold: 1}}
  ref={ref => this.flatList = ref}
/>

这是将最新消息添加到列表的代码

this.data = [ ...newMessages, ...this.data ];

Answer 1

您的案例看起来很简单，但是您要在顶部添加新消息，然后使用inverted标志将其反转到末尾位置

只需删除inverted即可删除const data = [...this.state.data, ...newMessages];标志并最后添加新项目

<FlatList
  style={{flex: 1}}
  data={this.state.data}
  keyExtractor={(item, index) => item.id}
  renderItem={this.renderItem}
/>

const data = [...this.state.data, ...newMessages];
this.setState({ data });

我希望这会起作用

Answer 2

您应使用解决方法来实现此目的。如果查看FlatList的文档（扩展了ScrollView的属性），您将看到您所需要做的就是将scrollEnabled属性设置为false以禁用滚动。由于您实际上并未发布太多代码，因此如何选择和在何处执行此操作将取决于您。一种简单的处理方法是使用状态：

<FlatList
  ...
  scrollEnabled={this.state.scrollEnabled}
/>

在您的情况下，可以在加载新数据时更改状态，并在呈现新数据时将其更改回。

有关此案，Github上有一个开放的issue。

Answer 3

将此内容放入视图

<FlatList
  data={this.state.data}
      ref={ref => {
        this.flatListRef = ref;
      }}
      initialScrollIndex={0}
      keyExtractor={item => item.id}
      extraData={this.state.refresh}
      renderItem={({item, index}) => {
        // animation={animation}
        return (
          <ListItem
            inAnimation={inAnimation}
            outAnimation={outAnimation}
            duration={duration}
            easing={easing}
            isDeleted={item._isDeleted}
            id={item.id}
            item={item}
          />
        );
      }}
    `/>`

运行此功能

this.flatListRef.scrollToIndex({
       animated: true,
       index: nextProps.indexScroll})

  });

添加项目时防止FlatList滚动

3 个答案: