Question

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

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

Answer 1

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

该插件现在构建在FlatList（版本＆gt; = 3.0.0）之上，非常适合处理大量项目。它还提供预览（您所追求的效果），捕捉效果，视差图片， RTL支持，以及更多。

您可以查看showcase以了解可以通过它实现的目标。不要犹豫与插件分享您的经验，因为我们总是试图改进它。

react-native-snap-carousel archriss showcase

编辑：two new layouts已在版本3.6.0中引入（一个具有一叠卡片效果，另一个具有类似火种的效果）。享受！

react-native-snap-carousel stack layout react-native-snap-carousel tinder layout

Answer 2

您可以使用ScrollView在iOS上使用paging enabled，在Android上使用ViewPagerAndroid来实现此目的。

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，因为我有几个问题。

Answer 3

谈到声称是世界上最好的 swiper 组件，它仍然无法按照官方swiper-react-native documentation的描述（自2018年11月起）立即可用。 swiper issue 444中描述了该问题和解决方法：

错误消息（在Android上）显示为 console.error: "fontFamily 'Arial' is not a system font and has not been loaded through Exponent.Font.loadAsync.

Zach Dixon提供了一个简洁的快速修复程序，为方便大家，在此重复。只需在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>

对于那些只对使用Scroll-View实现轮播的解释感兴趣的人，我建议a tutorial on a simple image carousel with ScrollView。本教程简单明了，详细说明了您必须注意的事项，但是您不能在其他View元素之内或之上直接使用它。特别是，捕捉效果不佳（在Android上）。

Answer 4

您可以创建自己的自定义轮播。轮播最终结果如下所示-

     goToNextPage = () => {
    const childlenth = this.getCustomData().length;
    selectedIndex = selectedIndex + 1;
    this.clearTimer();
    if (selectedIndex === childlenth) {
        this.scrollRef.current.scrollTo({ offset: 0, animated: false, nofix: true });
        selectedIndex = 1;
    }
    this.scrollRef.current.scrollTo({
        animated: true,
        x: this.props.childWidth * selectedIndex,
    });
    this.setUpTimer();
}

// pushing 1st element at last
 getCustomData() {
    const {data} = this.props;
    const finaldata = [];
    finaldata.push(...data);
    finaldata.push(data[0]);
    return finaldata;
}

这是循环轮播背后使用的主要逻辑。在这里，我们再次推送列表中的第一个项目，然后当滚动到达最后一个位置时，我们使滚动视图滚动到第一个位置，因为第一个和最后一个元素现在相同，我们滚动到第一个位置，动画如下< /p>

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

如需进一步参考，请访问提供的链接。

https://goel-mohit56.medium.com/custom-horizontal-auto-scroll-looped-carousel-using-scrollview-42baa5262f95

React Native Card Carousel查看？

4 个答案: