轮播 react_React本地轮播

轮播 react

In this piece, I am going to build a beautiful and effective carousel on React Native. If you don’t know what is Carousel, it is a dynamic scrolling list of elements in horizontal order, where the previous and next elements are partially visible.

在本文中，我将在React Native上构建一个漂亮而有效的轮播。 如果您不知道什么是Carousel ，则它是水平元素动态滚动列表，其中上一个和下一个元素是部分可见的。

At first glance, it seems complicated, fortunately, I will show you how it is easy to step by step. Let’s do magic together.

乍一看，它似乎很复杂，幸运的是，我将向您展示如何轻松地逐步进行。 让我们一起做魔术。

设置项目 (Setting up the Project)

Before we get to code the carousel logic, we have to create an app on React Native. We can create up the app by running the following lines of code:

在开始对轮播逻辑进行编码之前，我们必须在React Native上创建一个应用程序。 我们可以通过运行以下代码行来创建应用程序：

react-native init react_native_carousel
cd react_native_carousel
npm run ios

Great, we have successfully created our React Native app. We are ready for coding! 💪

太好了，我们已经成功创建了我们的React Native应用程序。 我们已经准备好进行编码！ 💪

制作轮播 (Make Carousel)

I am going to use react-native-snap-carousel lib to make horizontal responsive carousel. It is a useful lib on React Native with featuring previews, multiple layouts, performant handling of huge numbers of items. It is compatible with Android & iOS. You can install it with the following command:

我将使用react-native-snap-carousel lib制作水平响应式轮播。 这是React Native上有用的库，具有预览，多种布局，对大量项目的高性能处理。 与Android和iOS兼容。 您可以使用以下命令进行安装：

npm install --save react-native-snap-carousel

Next, let’s define constants for our carousel:

接下来，让我们为轮播定义常量：

// carousel slider width
export const SCREEN_WIDTH = Dimensions.get('window').width;
export const CAROUSEL_VERTICAL_OUTPUT = 56;
export const CAROUSEL_ITEM_WIDTH = SCREEN_WIDTH - CAROUSEL_VERTICAL_OUTPUT;

After, We will code two main functions renderItem and renderPagination. We will use constants data for carousel content. Here’s a link to the data of carousel. Also, We will store the currently active slide in the local state and update it when the carousel will change the slide.

之后，我们将编写两个主要函数renderItem和renderPagination 。 我们将使用常量数据作为轮播内容。 这data of carousel链接。 同样，我们将当前活动的幻灯片存储在本地状态，并在轮播更改幻灯片时对其进行更新。

更多动画 (More Animations)

React Native provides Animated API for animations. Animated API focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and start/stop methods to control time-based animation execution.

React Native提供了用于动画的Animated API。 Animated API着重于输入和输出之间的声明性关系，以及它们之间的可配置转换以及用于控制基于时间的动画执行的开始/停止方法。

We are going to animate our app with Animated.spring. It tracks the velocity state to create fluid motions as the toValue updates. We will change backgroundColor when carousel slide changes.

我们将使用Animated.spring动画化我们的应用程序。 当toValue更新时，它跟踪速度状态以创建流体运动。 当轮播幻灯片更改时，我们将更改backgroundColor 。

Above, we use useRef to persist Animated value. useRef returns a mutable ref object whose .current property is initialized to the passed argument.

上面，我们使用useRef来保留Animated值。 useRef返回一个可变的ref对象，其.current属性已初始化为传递的参数。

We should use the native driver by specifying useNativeDriver: false in our animation configuration. Because Animated.spring is not a supported with native driver.

我们应该通过在动画配置中指定useNativeDriver: false来使用本机驱动程序。 因为本机驱动程序不支持Animated.spring。

让我们展示我们的轮播 (Let’s Demonstrate Our Carousel)

React Native Carousel

React原生轮播

If you want to check all the code, here’s the link to Github.

如果您想检查所有代码，请访问Github 。

Thanks for reading, I hope you found this piece useful. Happy coding!

感谢您的阅读，希望您觉得这篇文章有用。 编码愉快！

资源资源 (Resources)

翻译自: https://medium.com/javascript-in-plain-english/react-native-carousel-4df6db1c3303

轮播 react