添加新项目时防止 FlatList 滚动

问题描述 投票:0回答:4

我的聊天应用程序中有一个倒置的垂直

FlatList
,它在底部显示最新消息,在顶部显示最旧的消息(与所有其他聊天应用程序一样)
问题是当我想将新消息添加到列表底部时,
FlatList
自动跳转到列表的底部!
我所需要的就是防止在这种情况下滚动

这是我的

FlatList

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

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

const data = [ ...newMessages, ...this.state.data ];
this.setState({ data });
react-native react-native-flatlist react-native-scrollview
4个回答
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 });

我希望这会起作用


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

  });

0
投票

您可以同时使用 onViewableItemsChanged 和scrollToIndex 来保持 viewableItems 与之前的状态保持一致。

const flatListRef = React.useRef();
const startIndexRef = React.useRef(0);
  
const handleListChange = () => {
  // ...otherlogic

  if (haseAddedToStart)
    flatListRef.current?.scrollToIndex({
      index: startIndexRef.current + 1,
      animated: false,
    });      
};

const onViewableItemsChanged = React.useCallback(({ viewableItems }) => {
  startIndexRef.current = viewableItems[0].index;
}, []);

要添加到平面列表的额外道具是 ref 和 onViewableItemsChanged

 <FlatList              
          ref={flatListRef}
          onViewableItemsChanged={onViewableItemsChanged}
          // ...otherProps
        />

onViewableItemsChanged 应该与 useCallback 一起使用,因为更改列表会导致错误。

如果第一个项目是半可见的,它将滚动到小于项目高度。

通过 onScrollEndDrag 和 onMomentumScrollEnd 应该可以获得更准确的结果,但需要计算项目高度。


-1
投票

您应该使用解决方法来实现此目的。如果您检查 FlatList(它扩展了 ScrollView 的属性)的文档,您会发现您需要做的就是将scrollEnabled 属性设置为 false 以禁用滚动。您选择如何以及在何处执行此操作将取决于您,因为您并没有真正发布大量代码。处理这个问题的一个简单方法是使用状态:

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.