如何在 React Native 中设计类似于 Android 应用切换器的 UI？

Question

我试图弄清楚在 React Native 中设计我的应用程序的 UI 会有多困难。我想要的主要 UI 组件之一是一副卡片，可以（垂直）滚动并选择（以显示卡片的更多详细信息）。

普通 Android 中的应用切换器就是一个很好的例子

（见此处：https://www1-lw.xda-cdn.com/files/2015/04/android-lollipop-recents-carousel-100526174-large.idge_.png）。

我只想知道：

1. 这在 React Native 中是否可行，无需付出大量努力？
2. 如果有人知道解决此问题的一般方法

注意：这应该适用于 Android 和 iOS（具体版本无关紧要 - 它们可能是相当新的）。

Answer 1

是的，这很简单。我的第一种方法是将项目相互叠加，并将每个项目用作 panResponder 来控制垂直移动时整个甲板的滚动。使用一些数学来单独定位每个项目，您可以确保它们以类似的方式移动（在顶部时，它们滚动非常缓慢，而当它们接近中心时，它们滚动得更快）。确保一次只渲染大约 6-7 个项目（可见的项目），你不应该有很多性能问题。 如果您对 Animated 和 PanResponder 没有太多经验，我肯定会建议您练习一些更简单的示例，直到您掌握了窍门。 这并不难。如果您熟悉这些，最多可能需要几天时间才能完成。