Javascript 反应本机卡转盘视图？

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

---

我在F8 2016应用程序中也看到过，一直在搜索如何通过水平滚动实现过渡和类似旋转木马的视图。

您可以通过在iOS和Android上使用来实现这一点

F8是一款开源应用程序， 你可以看到这就是它实际使用的：

此组件呈现所有页面

如果您只希望呈现可见页面、左侧页面和右侧页面以节省内存，则在其上构建了另一个组件：

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

---

但是我不推荐，因为我对它有一些问题。

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

该插件现在构建在

FlatList

（版本>=3.0.0）之上，非常适合处理大量项目。它还提供预览（您追求的效果），捕捉效果，视差图像，RTL支持，等等

您可以查看一下，以了解使用它可以实现什么。不要犹豫，分享你的经验与插件，因为我们总是试图改善它

---

编辑：已在版本

3.6.0

中引入（一个具有一叠卡片效果，另一个具有类似火绒的效果）。享受吧

---

说到号称世界一流的“swiper”组件，它仍然不能像官方报告中描述的那样开箱即用（截至2018年11月）。有关问题和解决方法，请参见：

错误消息（在Android上）说明控制台。错误：“fontFamily'Arial'不是系统字体，没有通过Exponent.font.loadAsync加载。

提供了一个优雅的快速修复，为了方便大家，我在这里重复。只需在

render（）

-函数中使用以下JSX片段，即可避免需要新字体：

<Swiper style={styles.wrapper} showsButtons={true} 
        nextButton={<Text>&gt;</Text>} prevButton={<Text>&lt;</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>

幻灯片1
幻灯片2
幻灯片3

---

对于那些只对如何使用滚动视图实现旋转木马感兴趣的人，我推荐。本教程非常简单，详细介绍了必须注意的事项，但您不能在其他视图元素中或在其他视图元素之上使用它。尤其是捕捉效果不佳（在Android上）.

您可以创建自己的自定义旋转木马。旋转木马的最终结果如下所示-

这是循环传送带后面使用的主要逻辑。 在这里，我们再次按下列表中的最后一个项目，然后当滚动到达最后一个位置时，我们使滚动视图滚动到第一个位置，因为第一个和最后一个元素现在是相同的，我们用这样的动画滚动到第一个位置

this.scrollRef.current.scrollTo({ offset: 0, animated: false, nofix: true });

如需进一步参考，请浏览提供的链接

---

@jean regisser您在使用

react native swiper

时遇到的主要问题是什么？

react native swiper

目前有一个主要的android错误。它在android上根本不显示。有多个问题，最近没有被接受的PR。我认为该模块已被放弃。@MikeS。截至2018年11月，它看起来已经存在了有一些提交给

reat native swiper

。我唯一遇到的安卓问题是字体问题，请参见下面的答案。我也会对这个插件保持警惕。自2018年2月以来，它没有任何更新。Hey Mike，让我向你保证，这个插件仍然存在。最新的合并更新是在两个月前完成的，但很多大量的工作正在幕后进行。而且，如果你仔细观察这些问题，你会发现它们中的每一个都在几个小时内得到了回答。不过，如果你想提供帮助，欢迎优秀的贡献者；-）谢谢，@bend。我会关注它。不过，在我向企业应用程序添加库之前，我需要确保它保持最新RN库。到目前为止，该库有许多未解决的问题，请求不断增加。我想知道代码所有者正在做些什么来推动事情向前发展。虽然此链接可能会回答问题，但最好在此处包含答案的基本部分，并提供链接供参考。如果链接页面更改-

this.scrollRef.current.scrollTo({ offset: 0, animated: false, nofix: true });