React-Native水平滚动视图分页:预览下一页/卡片 [英] React-Native Horizontal Scroll View Pagination: Preview Next Page/Card

问题描述

我想要一个启用了分页功能的水平ScrollView，它有一个特殊要求:每页(或卡片)为容器宽度的90％.剩余的10％应该是下一页的预览.

I want to to a horizontal ScrollView with pagination enabled with one special requirement: each page (or card) is 90% of the container wide. The remaining 10% should be a preview of the next page.

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

It is possible to do this with ScrollView? Can I somehow specify the width of the pagination instead of taking the width of the container?

(图像取自这个类似的问题:反应本机卡轮播视图?)

(image taken from this similar question: React Native Card Carousel view?)

推荐答案

您绝对可以使用ScrollView甚至是更好的FlatList来做到这一点.但是，真正棘手的部分是捕捉效果.您可以使用道具snapToInterval和snapToAlignment来实现(请参见 Vasil Enchev的答案)；不幸的是，这些仅适用于iOS.

You can absolutely do that with ScrollView or, even better, FlatList. However, the really tricky part is the snapping effect. You can use props snapToInterval and snapToAlignment to achieve it (see Vasil Enchev's answer); unfortunately, these are iOS-only.

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

A co-worker and I created a plugin that answers this particular need. We ended up open-sourcing it, so it's all yours to try: react-native-snap-carousel.

该插件现在基于FlatList(版本> = 3.0.0)构建，非常适合处理大量项目.它提供预览(您想要的效果)，针对iOS和Android的捕捉效果，视差图像， RTL支持，还有更多.

The plugin is now built on top of FlatList (versions >= 3.0.0), which is great to handle huge numbers of items. It provides previews (the effect you're after), snapping effect for iOS and Android, parallax images, RTL support, and more.

您可以查看展示柜以了解情况用它可以实现什么.请不要犹豫，与我们分享您的插件经验，因为我们一直在努力改进它.

You can take a look at the showcase to get a grasp of what can be achieved with it. Do not hesitate to share your experience with the plugin since we're always trying to improve it.

两个新布局已在版本3.6.0中引入(一个具有一堆纸牌效果，另一个具有类似火种的效果).享受吧！

Edit : two new layouts have been introduced in version 3.6.0 (one with a stack of cards effect and the other with a tinder-like effect). Enjoy!

这篇关于React-Native水平滚动视图分页:预览下一页/卡片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！