[English](./README.md) | 简体中文
# react-native-reanimated-carousel
使用react-native-snap-carousel快速滑动,当到连接处时可以看清楚的看到卡顿。(gif 4.6mb)
使用react-native-reanimated-carousel对比,每秒滚动十张依然顺畅链接,无限滚动。这里使用了gif无法很清晰的看出。


[](https://www.npmjs.com/package/react-native-reanimated-carousel)
[](https://www.npmjs.com/package/react-native-reanimated-carousel)
[](https://www.npmjs.com/package/react-native-reanimated-carousel)
[](https://github.com/dohooo/react-native-reanimated-carousel/issues)
[](https://github.com/dohooo/react-native-reanimated-carousel/issues?q=is%3Aissue+is%3Aclosed)
[](https://discord.gg/KsXRuDs43y)
## ReactNative 社区最好用的轮播图组件! 🎉🎉🎉
- **完全解决了`react-native-snap-carousel`的** [[问题]](https://github.com/meliorence/react-native-snap-carousel/issues/632)
- **易用**、**无限滚动**、**完全使用 Reanimated2 实现**
> v2 已经发布,希望大家喜欢!~ [[v1 文档]](https://github.com/dohooo/react-native-reanimated-carousel/tree/v1.x.x)
> 支持 Web 端 [[示例]](https://dohooo.github.io/react-native-reanimated-carousel/)
> 点击图片,查看代码 [[试一下]](https://snack.expo.dev/@zhaodonghao586/simple-carousel) 🍺
|
|
|
|
| :------------------------------------------------------------------: | :-------------------------------------------------------------------: | :--------------------------------------------------------------------: |
| normal-horizontal | normal-vertical | parallax-horizontal |
|
|
|
|
| parallax-vertical | stack-horizontal-left | stack-horizontal-right |
|
|
|
|
| stack-vertical-left | stack-vertical-right | stack-horizontal-right |
|
|
| left-align |
> 现在你可以和我们一起来制作酷炫的动画了! 非常简单! [[详情]](./docs/custom-animation.zh-CN.md)
|
|
|
|
| :-----------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------: |
| advanced-parallax | pause-advanced-parallax | scale-fade-in-out |
|
|
|
|
| rotate-scale-fade-in-out | rotate-in-out | anim-tab-bar |
|
|
|
|
| marquee | multiple | circular |
|
|
|
|
| fold | tear | press-swipe |
|
|
|
|
| cube-3d | blur-parallax | curve |
|
|
|
|
| parallax-layers | stack-cards | flow |
|
| | |
| blur-rotate | | |
## 目录
1. [安装](#安装)
1. [使用](#使用)
1. [Props](./docs/props.zh-CN.md)
1. [提示](#提示)
1. [原因](#原因)
1. [示例](#示例)
---
## 安装
在项目根目录打开终端并且执行:
```sh
yarn add react-native-reanimated-carousel
```
如果你使用 npm:
```sh
npm install react-native-reanimated-carousel
```
并且我们需要安装 [`react-native-gesture-handler`](https://github.com/kmagiera/react-native-gesture-handler) 、[`react-native-reanimated`](https://github.com/kmagiera/react-native-reanimated),安装步骤可参考各自文档。
| | react-native-reanimated | react-native-gesture-handler |
| -------------------------------------- | ----------------------- | ---------------------------- |
| react-native-reanimated-carousel v1、v2 | >=2.0 & <2.7.0 | <2.9.0 |
| react-native-reanimated-carousel v3 | >=2.7.0 & < 3.x | <2.9.0 |
| react-native-reanimated-carousel v4 | >=3.x | >=2.9.0 |
## 使用
```tsx
import * as React from "react";
import { Dimensions, Text, View } from "react-native";
import Carousel from "react-native-reanimated-carousel";
function Index() {
const width = Dimensions.get("window").width;
return (
常见的无限滚动轮播图,在快速滑动时会出现卡住的情况,这是因为实现方式而导致的问题。所以这个组件用了完全不同的方式来实现,并获得了最佳的性能也解决了这个问题,这就是创建这个库的原因。