React Native中 FlatList动态吸顶 stickyHeaderIndices 安卓上白屏处理

页面结构如下图所示

场景描述:切换左侧tab的时候,右侧固定吸顶的元素可能是第一个,也可能是第X个,所有当点击了左侧tab之后,需要动态设置flatList的 stickyHeaderIndices

bug1 - 部分安卓机器上切换完tab之后,动态改变了 stickyHeaderIndices,右侧列表数据出现白屏,且仍然可以滚动

解决方式:对flatList设置key值,如下

  // stickHeadList=[0]
  <FlatList
	key={stickHeadList}
	stickyHeaderIndices={stickHeadList}
  />

bug2 - 在上面的基础上,切换tab仍可能出现白屏

原因:一般做列表,考虑到优化,都会设置较小的初始化渲染值,比如initialNumToRender 设成10,当时动态设置 stickyHeaderIndices 的时候,如果需要吸顶的item的index值大于 10(设置的时候压根没有初始化渲染),那么就会出现白屏

解决方式:initialNumToRender值的设置,需要大于 stickyHeaderIndices 里 第一个元素的值,可动态设也可根据ios,安卓设不同的值,需注意吸顶值必须小于50

posted @ 2021-10-09 17:00  萝卜爱吃青菜  阅读(910)  评论(0编辑  收藏  举报