添加项目时防止FlatList滚动

时间:2019-06-12 11:27:32

标签: react-native react-native-flatlist

我在聊天应用程序中将垂直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 ];

3 个答案:

答案 0 :(得分:0)

您的案例看起来很简单,但是您要在顶部添加新消息,然后使用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 });

我希望这会起作用

答案 1 :(得分:0)

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

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

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

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

答案 2 :(得分:0)

将此内容放入视图

<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})

  });
相关问题