加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

React-Native使用Flatlist滚动到顶部

发布时间:2020-12-15 16:21:34 所属栏目:百科 来源:网络整理
导读:我在滚动到我的Flatlist的顶部时遇到了很多麻烦,所以任何帮助都将非常感谢! 基本上它从firebase获取前5个项目,然后当调用onEndReached时,我们将接下来的5个项目附加到列表中: data: [...this.state.data,...results] 现在我在我的视图顶部有一个刷新按钮,
我在滚动到我的Flatlist的顶部时遇到了很多麻烦,所以任何帮助都将非常感谢!

基本上它从firebase获取前5个项目,然后当调用onEndReached时,我们将接下来的5个项目附加到列表中:

data: [...this.state.data,...results]

现在我在我的视图顶部有一个刷新按钮,它执行以下操作:

this.flatListRef.scrollToOffset({ animated: true,y: 0 });

如果我在渲染前5个项目时单击此项,它会按预期滚动到列表顶部.只有在附加列表后才会出现此问题(我猜这些项目是关闭视图的?).

我也试过’ScrollToItem’但是我猜这是不行的,因为React Native docs中有以下内容:

Note: Cannot scroll to locations outside the render window without
specifying the getItemLayout prop.

谁能解释发生了什么或知道我做错了什么?

先感谢您!

getItemLayout :(不完全确定这是做什么或如何计算长度和偏移等)

getItemLayout = (data,index) => (
{ length: 50,offset: 50 * index,index }
)

return (
  <View>
    <FlatList
      ref={(ref) => { this.flatListRef = ref; }}
      onScroll={this.handleScroll}
      data={this.state.data}
      keyExtractor={item => item.key}
      ListFooterComponent={this.renderFooter()}
      onRefresh={this.handleRefresh}
      refreshing={this.state.newRefresh}
      onEndReached={this.handleEndRefresh}
      onEndReachedThreshold={0.05}
      getItemLayout={this.getItemLayout}
      renderItem={this.renderItem}
    />
    {this.state.refreshAvailable ? this.renderRefreshButton() : null}
  </View>
);

解决方法

正确的语法是

this.flatListRef.scrollToOffset({ animated: true,offset: 0 });

你也可以使用

scrollToIndex

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读