ReactNative FlatList：绝对停留中项目的流体扩展

Question

我正在尝试实现一种类似于 iOS 上的天气应用程序的行为：其中有一个城市瓷砖列表。

点击其中一个城市后，它会展开并增大尺寸，覆盖列表屏幕并显示该城市天气的详细信息。

按下“后退”按钮时，它也会折叠回列表项。

我通过将该城市图块的副本的绝对覆盖与原始图块的确切位置相匹配来实现了类似的行为。

然后有一个

withTiming

动画，它扩展绝对叠加层，使其占据屏幕的整个高度。

它可以工作，但它很卡顿，特别是如果覆盖层包含正在获取的其他一些数据，然后填充详细信息覆盖层。

有没有更好的方法来达到更平滑的效果？

Answer 1

我认为你可以在平面列表项目上进行条件渲染，当用户按下该项目时，你会渲染另一个高度为 screenHeight 的组件。

这是我为了演示这个想法而创建的一个基本示例，但您必须自己处理动画。