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中有以下内容:
谁能解释发生了什么或知道我做错了什么? 先感谢您! 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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |