React Native实现图片轮播组件及自动播放功能

本示例演示如何使用React Native构建一个简单而强大的图片轮播组件，同时实现自动播放功能。通过这个组件，开发者可以轻松地在React Native应用中集成图片轮播功能，提升用户体验。

import React, { useState, useEffect } from 'react';
import { View, Image, ScrollView } from 'react-native';

const Carousel = ({ images, autoPlayInterval = 3000 }) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      // 自动播放逻辑
      setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
    }, autoPlayInterval);

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

  return (
    <ScrollView horizontal pagingEnabled showsHorizontalScrollIndicator={false}>
      {images.map((image, index) => (
        <Image
          key={index}
          source={{ uri: image }}
          style={{ width: '100%', height: 200 }}
        />
      ))}
    </ScrollView>
  );
};

// 使用方式
const App = () => {
  const images = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
  ];

  return <Carousel images={images} autoPlayInterval={3000} />;
};

免责申明：文章和图片全部来源于公开网络，如有侵权，请通知删除 server@dude6.com