如何更新<sectionlist>顶部项目的高度,同时在向下滚动列表时保持滚动位置?

时间:2017-12-12 02:03:08

标签: reactjs react-native react-native-android react-native-ios react-native-flatlist

我有一个<SectionList />,有两个部分。

顶部显示项目的描述(无标题)。第二部分是带有包含搜索字段的粘性标题的项目列表。

描述高度可能因项目而异(即文本行数不同)。

---------------------------------------------
Section #1
---------------------------------------------

Description (variable height)

---------------------------------------------
Section #2
---------------------------------------------

Search box in sticky header.

---------------------------------------------

Item #1
Item #2
Item #3
...

---------------------------------------------

问题是当你向下滚动部分列表并选择一个新项目时,描述高度可能会改变,滚动位置会突然跳跃。

我的目标是在保持滚动位置的同时更新描述的高度。

我试过了:

  • 在描述高度更改之前和之后立即更新滚动位置。但是有一个明显的来回跳跃。

  • 将当前描述高度保存在状态中,将描述容器设置为隐藏溢出的高度,预先计算下一个描述的高度,在描述高度更改后计算下一个滚动位置,将滚动位置同步到描述高度(动画值),然后将部分列表滚动到下一个位置。因此,我们同时向上或向下滚动,同时向下或向上更改描述高度。这样做有效,但是没有办法在高度上使用本机驱动程序,而且体验很简陋。

  • 使用LayoutAnimation为描述高度更改设置动画。这会激活描述高度变化,使突然滚动变为平滑滚动。更好,但不完美。

有没有更好的方法来做到这一点,我忽视了?

0 个答案:

没有答案