React Native Card Carousel视图？

Question

有谁知道我们如何在 React Native 中实现这种视图，或者是否有任何可用的组件可以帮助解决这个问题？

我也在 F8 2016 应用程序中看到过，一直在寻找如何通过水平滚动实现过渡和类似轮播的视图。

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

Answer 1

您可以使用在 iOS 上 启用分页的 ScrollView 和在 Android 上启用 ViewPagerAndroid 来实现此目的。

F8 是一个开源应用程序，您可以看到它实际使用的是什么： https ://github.com/fbsamples/f8app/blob/master/js/common/ViewPager.js

该组件呈现所有页面。

如果您只想呈现可见页面和左右页面以节省内存，则可以在它之上构建另一个组件来完成它： https ://github.com/fbsamples/f8app/blob/master/js/common/ 轮播.js

还有各种其他类似的实现可用：

• https://js.coach/react-native?search=carousel
• https://js.coach/react-native?search=swiper

但是我不推荐 https://github.com/leecade/react-native-swiper 因为我遇到了几个问题。

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

Answer 2

我知道这个问题很老了，但我和一位同事最近不得不创建一个组件来满足这一特殊需求。我们最终将其开源，所以您可以尝试： react-native-snap-carousel 。

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

您可以看一下 展示柜，了解它可以实现什么。不要犹豫，分享您使用该插件的经验，因为我们一直在努力改进它。

---

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

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