Javascript React Native Card Carousel 视图？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37474552/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React Native Card Carousel view?
提问by vizFlux
Does anyone know how can we achieve this kind of view in React Native, or is there any available components out there that can help on this issue?
有谁知道我们如何在 React Native 中实现这种视图，或者是否有任何可用的组件可以帮助解决这个问题？
I've seen in F8 2016 app too, been searching on how to achieve the transition and the carousel-like view with horizontal scrolling.
我也在 F8 2016 应用程序中看到过，一直在寻找如何通过水平滚动实现过渡和类似轮播的视图。
回答by bend
I know that the question is old, but a co-worker and I recently had to create a component that answers this particular need. We ended up open-sourcing it, so it's all yours to try: react-native-snap-carousel.
我知道这个问题很老，但我和一位同事最近不得不创建一个组件来满足这个特殊需求。我们最终将其开源，因此您可以尝试：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 also provides previews(the effect you were after), snapping effect, parallax images, RTL support, and more.
该插件现在构建在FlatList（版本 >= 3.0.0）之上，非常适合处理大量项目。它还提供预览（您所追求的效果）、捕捉效果、视差图像、RTL 支持等。
You can take a look at the showcaseto 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 layoutshave been introduced in version 3.6.0(one with a stack of cards effect and the other with a tinder-like effect). Enjoy!
编辑：版本中引入了两种新布局3.6.0（一种具有一叠卡片效果，另一种具有类似火种的效果）。享受！
回答by Jean Regisser
You can achieve this using ScrollViewwith paging enabledon iOS and ViewPagerAndroidon Android.
你可以做到这一点使用滚动型与寻呼已启用iOS和ViewPagerAndroid在Android上。
F8 being an open source app, you can see that's what it's actually using: https://github.com/fbsamples/f8app/blob/master/js/common/ViewPager.js
F8 是一个开源应用程序，您可以看到它实际使用的内容：https: //github.com/fbsamples/f8app/blob/master/js/common/ViewPager.js
This component renders all pages.
该组件呈现所有页面。
If you only want to have the visible and left and right pages rendered to save memory, there's another component built on top of it that does it: https://github.com/fbsamples/f8app/blob/master/js/common/Carousel.js
如果您只想渲染可见页面和左右页面以节省内存，那么在它之上构建了另一个组件：https: //github.com/fbsamples/f8app/blob/master/js/common/ Carousel.js
There are various other similar implementations available:
还有各种其他类似的实现可用：
However I'm not recommending https://github.com/leecade/react-native-swiperas I've had several issues with it.
但是我不推荐https://github.com/leecade/react-native-swiper，因为我遇到了几个问题。
回答by B--rian
Speaking about the swiper-component claiming the best of the world, it still does not work out of the box (as of November 2018) as described in the official swiper-react-native documentation. The issue and a workaround is described in the swiper issue 444:
谈到声称世界上最好的swiper 组件，它仍然不能像官方swiper-react-native 文档中描述的那样开箱即用（截至 2018 年 11 月） 。问题和解决方法在swiper 问题 444 中描述：
The error message (on Android) states console.error: "fontFamily 'Arial' is not a system font and has not been loaded through Exponent.Font.loadAsync.
错误消息（在 Android 上）指出 console.error: "fontFamily 'Arial' is not a system font and has not been loaded through Exponent.Font.loadAsync.
Zach Dixonprovided an elegant quick-fix which I repeat here for everybody's convenience. Simply use the following JSX-snippet inside your render()-function to avoid that a new font is required:
Zach Dixon提供了一个优雅的快速修复，为了大家的方便，我在这里重复一下。只需在 -function 中使用以下 JSX-snippetrender()即可避免需要新字体：
<Swiper style={styles.wrapper} showsButtons={true}
nextButton={<Text>></Text>} prevButton={<Text><</Text>}>
<View style={styles.slide1}><Text style>Slide 1</Text></View>
<View style={styles.slide2}><Text style>Slide 2</Text></View>
<View style={styles.slide3}><Text style>Slide 3</Text></View>
</Swiper>
For those interested in explanations on how to implement carousel with Scroll-View only, I recommend a tutorial on a simple image carousel with ScrollView. The tutorial is straight forward and elaborates on the things one has to take care of, but you cannot use it out of the box within or on top of other View-elements. In particular the snapping does not work to well (on Android).
对于那些对如何仅使用 Scroll-View 实现轮播感兴趣的人，我推荐一个关于使用 ScrollView 的简单图像轮播的教程。本教程很直接，详细说明了必须处理的事项，但您不能在其他 View 元素内或之上开箱即用地使用它。特别是捕捉效果不佳（在 Android 上）。
