Question

我有带有ListHeaderComponent的Flatlist。 ListHeaderComponent的内容有点大。我想向上滚动屏幕。如何使用Flatlist实现？任何帮助将不胜感激。

Answer 1

您可以通过以下方式在Flatlist中创建引用来实现此目的：

 <FlatList
          horizontal={true}
          data={this.props.activeUsersList ? this.props.activeUsersList : []}
          renderItem={({item, index}) => {
            return this.renderUsername(item, index);
          }}
          ref={ref => {
            this.flatListRef = ref;
          }}
        />

，然后在下面的任何地方都可以调用它，它将滚动到顶部，

this.flatListRef.scrollToIndex({animated: true, index: 0});

希望有帮助。毫无疑问

Answer 2

您可以在FlatList中使用ref滚动到顶部或底部。

如果要将“平面列表”滚动到“顶部”。您可以使用-

<FlatList
    data={this.state.messages}
    renderItem={({ item }, index) => this.messageDisplay(item, index)}
    keyExtractor={(item, index) => index.toString()}
    ref={(ref) => (this.flatList = ref)}
    onContentSizeChange={ () => this.flatList.scrollToIndex({ animated: true }) }
    onLayout={ () => this.flatList.scrollToIndex({ animated: true }) }
/>

此处，数据存储在this.state.messages中，renderItem函数为messageDisplay

如果要将“滚动列表”滚动到底部。您可以使用-

<FlatList
    data={this.state.messages}
    renderItem={({ item }, index) => this.messageDisplay(item, index)}
    keyExtractor={(item, index) => index.toString()}
    ref={(ref) => (this.flatList = ref)}
    onContentSizeChange={ () => this.flatList.scrollToEnd({ animated: true }) }
    onLayout={ () => this.flatList.scrollToEnd({ animated: true }) }
/>

我希望这会有所帮助。

如何滚动到FlatList ListHeaderComponent顶部？

2 个答案: