React Native Card Carousel 视图？

Question

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

我也在F8 2016 app中看到过，一直在寻找如何通过水平滚动实现转场和类似轮播的视图。

Answer 1

您可以在 iOS 上使用 ScrollView 和 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://js.coach/react-native?search=carousel
• https://js.coach/react-native?search=swiper

但是我不推荐https://github.com/leecade/react-native-swiper，因为我遇到了几个问题。

Answer 2

我知道这个问题很老了，但我和一位同事最近不得不创建一个组件来满足这一特殊需求。我们最终将其开源，因此您可以尝试：react-native-snap-carousel。

该插件现在构建在 FlatList（版本 >= 3.0.0）之上，非常适合处理大量项目。它还提供预览（您想要的效果）、捕捉效果、视差图像、RTL支持和更多。

您可以查看showcase 以了解使用它可以实现什么。请随时分享您对该插件的体验，因为我们一直在努力改进它。

---

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

Answer 3

谈到声称世界上最好的 swiper 组件，它仍然无法开箱即用（截至 2018 年 11 月），如官方 swiper-react-native documentation 中所述。 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()-function 中使用以下 JSX-sn-p 即可避免需要新字体：

<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。本教程直截了当并详细说明了必须注意的事项，但您不能在其他视图元素内或顶部使用它。特别是捕捉效果不佳（在 Android 上）。

Answer 4

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

     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;
}

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

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

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

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