React Native 之高性能循环滚动的轮播图

2024-01-12 09:13:55

作为一名初级前端开发，我想和大家分享如何使用 React Native + react-native-gesture-handle + react-native-reanimated 来创建一个高性能的循环滚动的轮播图。

1. 准备工作

在开始编码之前，我们先准备一下必要的工具和依赖项：

Node.js 和 npm
React Native CLI
文本编辑器
react-native-gesture-handle
react-native-reanimated
react-native-snap-carousel

2. 项目搭建

创建一个新的 React Native 项目：

npx react-native init MyCarouselProject

进入项目目录：

cd MyCarouselProject

安装必要的依赖项：

npm install react-native-gesture-handle react-native-reanimated react-native-snap-carousel

3. 编写代码

3.1 导入必要的组件和库

import React, { useState, useRef } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Carousel from 'react-native-snap-carousel';
import { PanGestureHandler, State } from 'react-native-gesture-handle';
import Animated, { cond, eq, set, useAnimatedState } from 'react-native-reanimated';

3.2 定义轮播图数据

const images = [
  { id: 1, url: 'https://source.unsplash.com/1080x720/?nature' },
  { id: 2, url: 'https://source.unsplash.com/1080x720/?city' },
  { id: 3, url: 'https://source.unsplash.com/1080x720/?technology' },
];

3.3 创建轮播图组件

const CarouselComponent = () => {
  const carouselRef = useRef(null);
  const [activeIndex, setActiveIndex] = useState(0);
  const translateX = useAnimatedState(0);

  const onGestureEvent = Animated.event(
    [
      {
        nativeEvent: {
          translationX: translateX,
          state: State.ACTIVE,
        },
      },
    ],
    { useNativeDriver: true }
  );

  const onIndexChanged = (index) => {
    setActiveIndex(index);
  };

  return (
    <View style={styles.container}>
      <PanGestureHandler onGestureEvent={onGestureEvent}>
        <Carousel
          ref={carouselRef}
          data={images}
          renderItem={({ item }) => <Image source={{ uri: item.url }} style={styles.image} />}
          sliderWidth={screenWidth}
          itemWidth={itemWidth}
          inactiveSlideOpacity={0.7}
          inactiveSlideScale={0.9}
          loop={true}
          autoplay={true}
          autoplayDelay={5000}
          onIndexChanged={onIndexChanged}
          useScrollView={true}
        />
      </PanGestureHandler>
      <View style={styles.pagination}>
        {images.map((image, index) => (
          <Text
            key={index}
            style={[styles.paginationDot, { opacity: activeIndex === index ? 1 : 0.5 }]}
          >
            ⬤
          </Text>
        ))}
      </View>
    </View>
  );
};

3.4 编写样式

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: itemWidth,
    height: itemHeight,
    resizeMode: 'cover',
  },
  pagination: {
    position: 'absolute',
    bottom: 20,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  paginationDot: {
    fontSize: 20,
    color: 'white',
    marginHorizontal: 5,
  },
});