README.zh-CN.md

English | 简体中文

react-native-reanimated-carousel

ReactNative 社区最好用的轮播图组件! 🎉🎉🎉

• 完全解决了react-native-snap-carousel的 [问题]
• 易用、无限滚动、完全使用 Reanimated2 实现

v2 已经发布，希望大家喜欢!~ [v1 文档]

支持 Web 端 [示例]

点击图片，查看代码 [试一下] 🍺

现在你可以和我们一起来制作酷炫的动画了！ 非常简单! [详情]

目录

1. 安装
2. 使用
3. Props
4. 提示
5. 原因
6. 示例

---

安装

在项目根目录打开终端并且执行:

yarn add react-native-reanimated-carousel

如果你使用 npm:

npm install react-native-reanimated-carousel

并且我们需要安装 react-native-gesture-handler 、react-native-reanimated(>=2.0.0)，安装步骤可参考各自文档。

使用

import Carousel from 'react-native-reanimated-carousel';

<Carousel
    width={300}
    height={150}
    data={[1, 2, 3]}
    renderItem={({ item }) => <AnyElement />}
/>;

提示

• 优化

  • 当渲染大量元素时，可使用windowSize属性，来控制当前元素的两侧渲染数量，默认为全量渲染。经测试不加此属性，渲染 200 个空 view 时会出现掉帧情况，设置此属性后渲染 1000 个空 view 依旧流畅。（具体数量与测试的手机型号相关）

• 在ScrollView/FlastList中使用

  • #143 - Carousel suppresses ScrollView/FlastList scroll gesture handler: 当轮播图被放置在 ScrollView/FlatList 中时，轮播图的部分将无法控制列表滚动，解决办法是我们只允许手势系统识别某一方向，而不是所有方向，在下方例子中我们为了让列表可以向下滑动，所以我们使用activeOffsetX属性来控制轮播图只识别横向手势:

    <Carousel
      {...}
      panGestureHandlerProps={{
        activeOffsetX: [-10, 10],
      }}
    />

• RTL

  • 所有 layout 均完美支持 RTL 模式，并且无需再做任何配置。但在 RTL 模式下使用自动播放时，默认不会自动转换方向，需要结合 autoPlayReverse 来手动控制方向。

• EXPO

  • 如果你使用 EXPO 托管工作流，请确定你的 EXPO SDK 版本大于 41，因为旧的版本并不支持Reanimated(v2)。

原因

常见的无限滚动轮播图，在快速滑动时会出现卡住的情况，这是因为实现方式而导致的问题。所以这个组件用了完全不同的方式来实现，并获得了最佳的性能也解决了这个问题，这就是创建这个库的原因。

使用react-native-snap-carousel快速滑动，当到连接处时可以看清楚的看到卡顿。(gif 4.6mb)

使用react-native-reanimated-carousel对比,每秒滚动十张依然顺畅链接，无限滚动。这里使用了gif无法很清晰的看出。

示例

:pretty 使用更好看的图片

yarn ios
yarn ios:pretty

yarn android
yarn android:pretty

yarn web
yarn web:pretty

许可

MIT