React Native Card Carousel查看?

viz*_*lux 12 javascript facebook ios react-native

在此输入图像描述

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

我也在F8 2016 app中看过,一直在寻找如何通过水平滚动来实现过渡和旋转木马般的视图.

ben*_*end 20

我知道问题是陈旧的,但是我和同事最近不得不创建一个满足这一特殊需求的组件.我们最终开源了,所以你可以试试:react-native-snap-carousel.

该插件现在构建在FlatList(版本> = 3.0.0)之上,这非常适合处理大量项目.它还提供预览(您所追求的效果),捕捉效果,视差图像,RTL支持等.

你可以看看展示,以了解它可以实现的目标.不要犹豫与插件分享您的经验,因为我们总是试图改进它.

react-native-snap-carousel archriss展示 react-native-snap-carousel archriss aix


编辑:版本中引入了两个新布局3.6.0(一个具有一叠卡片效果,另一个具有类似火种的效果).请享用!

react-native-snap-carousel堆栈布局 react-native-snap-carousel火种布局

  • 谢谢,@ bend。我会密切注意的。不过,在将库添加到企业应用程序之前,我需要确保它与RN库保持最新。 (2认同)

Jea*_*ser 15

你可以做到这一点使用滚动型启用分页 iOS和ViewPagerAndroid在Android上.

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

此组件呈现所有页面.

如果您只想渲染可见和左右页面以节省内存,那么还有另一个构建在它上面的组件:https: //github.com/fbsamples/f8app/blob/master/js/common/ Carousel.js

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

但是我不推荐使用https://github.com/leecade/react-native-swiper,因为我有几个问题.

  • @ jean-regisser你用`react-native-swiper`遇到的主要问题是什么? (2认同)