React-Native 水平滚动视图分页:预览下一页/卡片 [英] React-Native Horizontal Scroll View Pagination: Preview Next Page/Card
问题描述
我想要一个水平 ScrollView 启用分页，有一个特殊要求:每个页面(或卡片)是容器宽度的 90%.剩下的 10% 应该是下一页的预览.
使用 ScrollView 可以做到这一点吗?我可以以某种方式指定分页的宽度而不是容器的宽度吗?
(图片取自这个类似的问题:已在 3.6.0 版本中引入(一个具有一堆卡片效果，另一个具有类似火种的效果).享受！
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.
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?)
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.
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.
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.
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屋！
