react native轮播实现

使用 react-native-snap-carousel 实现轮播

react-native-snap-carousel 是一个流行的 React Native 轮播组件，支持自定义布局和动画效果。

安装依赖：

npm install react-native-snap-carousel

基础实现代码：

import React from 'react';
import { View, Text, Dimensions } from 'react-native';
import Carousel from 'react-native-snap-carousel';

const { width: screenWidth } = Dimensions.get('window');

const MyCarousel = () => {
  const data = [
    { title: 'Item 1' },
    { title: 'Item 2' },
    { title: 'Item 3' },
  ];

  const renderItem = ({ item }) => {
    return (
      <View style={{ width: screenWidth - 60, height: 200, backgroundColor: 'lightblue', justifyContent: 'center', alignItems: 'center' }}>
        <Text>{item.title}</Text>
      </View>
    );
  };

  return (
    <Carousel
      data={data}
      renderItem={renderItem}
      sliderWidth={screenWidth}
      itemWidth={screenWidth - 60}
    />
  );
};

export default MyCarousel;

使用 react-native-reanimated-carousel 实现高性能轮播

react-native-reanimated-carousel 基于 Reanimated 2，提供更流畅的动画性能。

安装依赖：

npm install react-native-reanimated-carousel

基础实现代码：

import React from 'react';
import { View, Text, Dimensions } from 'react-native';
import Carousel from 'react-native-reanimated-carousel';

const { width } = Dimensions.get('window');

const MyCarousel = () => {
  const data = [...Array(5).keys()];

  return (
    <Carousel
      loop
      width={width}
      height={200}
      autoPlay={true}
      data={data}
      scrollAnimationDuration={1000}
      renderItem={({ index }) => (
        <View style={{ flex: 1, backgroundColor: 'lightgreen', justifyContent: 'center', alignItems: 'center' }}>
          <Text>{index}</Text>
        </View>
      )}
    />
  );
};

export default MyCarousel;

使用 ScrollView 实现基础轮播

对于简单需求，可以直接使用 ScrollView 实现轮播效果。

实现代码：

import React, { useRef } from 'react';
import { View, Text, ScrollView, Dimensions, StyleSheet } from 'react-native';

const { width } = Dimensions.get('window');

const MyCarousel = () => {
  const scrollViewRef = useRef(null);
  const items = ['Slide 1', 'Slide 2', 'Slide 3'];

  return (
    <ScrollView
      ref={scrollViewRef}
      horizontal
      pagingEnabled
      showsHorizontalScrollIndicator={false}
    >
      {items.map((item, index) => (
        <View key={index} style={[styles.slide, { width }]}>
          <Text>{item}</Text>
        </View>
      ))}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  slide: {
    height: 200,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'lightpink',
  },
});

export default MyCarousel;

自定义轮播指示器

为轮播添加指示器可以提升用户体验。

实现代码：

import React, { useState } from 'react';
import { View, Text, Dimensions, StyleSheet } from 'react-native';
import Carousel from 'react-native-snap-carousel';

const { width } = Dimensions.get('window');

const MyCarouselWithIndicator = () => {
  const [activeIndex, setActiveIndex] = useState(0);
  const data = ['Item 1', 'Item 2', 'Item 3'];

  const renderItem = ({ item }) => (
    <View style={[styles.slide, { width: width - 40 }]}>
      <Text>{item}</Text>
    </View>
  );

  return (
    <View>
      <Carousel
        data={data}
        renderItem={renderItem}
        sliderWidth={width}
        itemWidth={width - 40}
        onSnapToItem={(index) => setActiveIndex(index)}
      />
      <View style={styles.indicatorContainer}>
        {data.map((_, index) => (
          <View
            key={index}
            style={[
              styles.indicator,
              index === activeIndex && styles.activeIndicator,
            ]}
          />
        ))}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  slide: {
    height: 200,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'lightblue',
  },
  indicatorContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    marginTop: 10,
  },
  indicator: {
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: 'gray',
    marginHorizontal: 4,
  },
  activeIndicator: {
    backgroundColor: 'blue',
  },
});

export default MyCarouselWithIndicator;

自动轮播实现

为轮播添加自动播放功能可以增强用户体验。

实现代码：

import React, { useRef, useEffect } from 'react';
import { View, Text, Dimensions } from 'react-native';
import Carousel from 'react-native-snap-carousel';

const { width } = Dimensions.get('window');

const AutoPlayCarousel = () => {
  const carouselRef = useRef(null);
  const data = ['Slide 1', 'Slide 2', 'Slide 3'];
  const [activeIndex, setActiveIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      const nextIndex = (activeIndex + 1) % data.length;
      carouselRef.current.snapToItem(nextIndex);
      setActiveIndex(nextIndex);
    }, 3000);

    return () => clearInterval(interval);
  }, [activeIndex]);

  const renderItem = ({ item }) => (
    <View style={{ width: width - 60, height: 200, backgroundColor: 'lightyellow', justifyContent: 'center', alignItems: 'center' }}>
      <Text>{item}</Text>
    </View>
  );

  return (
    <Carousel
      ref={carouselRef}
      data={data}
      renderItem={renderItem}
      sliderWidth={width}
      itemWidth={width - 60}
      onSnapToItem={(index) => setActiveIndex(index)}
    />
  );
};

export default AutoPlayCarousel;