React-Native 水平滚动视图分页：预览下一页/卡片

Question

我想要一个启用分页的水平 ScrollView 并满足一个特殊要求：每个页面（或卡片）是容器宽度的 90%。剩下的 10% 应该是下一页的预览。

可以用 ScrollView 做到这一点吗？我可以以某种方式指定分页的宽度而不是采用容器的宽度吗？

（图片取自类似问题： React Native Card Carousel view? ）

原文由 Johannes Filter 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您绝对可以使用 ScrollView 或者更好的是 FlatList 来做到这一点。然而，真正棘手的部分是捕捉效果。您可以使用道具 snapToInterval 和 snapToAlignment 来实现它（参见 Vasil Enchev 的回答）；不幸的是，这些仅适用于 iOS。

我和一位同事创建了一个插件来满足这一特殊需求。我们最终将其开源，因此您可以尝试： react-native-snap-carousel 。

该插件现在构建在 FlatList （版本 >= 3.0.0）之上，非常适合处理大量项目。它提供 预览（您所追求的效果）、iOS 和 Android 的 捕捉效果、 视差图像、 RTL 支持 等。

您可以查看 展示柜，了解使用它可以实现的目标。不要犹豫，分享您对插件的体验，因为我们一直在努力改进它。

---

编辑：版本 3.6.0 中引入了 两种新布局（一种具有一堆卡片效果，另一种具有类似火种的效果）。享受！

原文由 bend 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我花了很多时间来解决这个问题，直到我弄清楚了，所以如果它对某人有帮助，这就是我的解决方案。

https://snack.expo.io/H1CnjIeDb

问题是所有这些都是必需的，应该关闭分页

horizontal={true}
decelerationRate={0}
snapToInterval={width - 60}
snapToAlignment={"center"}

原文由 Vasil Enchev 发布，翻译遵循 CC BY-SA 3.0 许可协议