11

我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 });
4

3 回答 3

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

我希望这会奏效

于 2019-11-20T13:02:01.190 回答
0

您应该使用解决方法来实现此目的。如果您查看 FlatList 的文档（它扩展了 ScrollView 的道具），您会发现您需要做的就是将 scrollEnabled 道具设置为 false 以禁用滚动。您选择如何以及在何处执行此操作将取决于您，因为您并没有真正发布很多代码。处理此问题的一种简单方法是使用状态：

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

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

Github 上有一个关于此案例的未解决问题。

于 2019-11-20T13:14:10.837 回答
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})

  });
于 2020-07-12T12:07:09.763 回答