基于react native的自定义轮播图

import React, { useState } from 'react';
import { StyleSheet, View, Image, Text, TouchableOpacity } from 'react-native';
 
export default function Carousel({ data }) {
  const [activeIndex, setActiveIndex] = useState(0);
 
  const renderDots = () => {
    return data.map((_, index) => {
      const isActive = index === activeIndex;
      return (
        <View
          style={[styles.dot, isActive && styles.activeDot]}
          key={`dot-${index}`}
        />
      );
    });
  };
 
  const handleNext = () => {
    setActiveIndex((activeIndex + 1) % data.length);
  };
 
  const handlePrevious = () => {
    setActiveIndex((activeIndex - 1 + data.length) % data.length);
  };
 
  const { image, title, description } = data[activeIndex];
 
  return (
    <View style={styles.container}>
      <Image style={styles.image} source={image} />
      <View style={styles.dotContainer}>
        {renderDots()}
      </View>
      <View style={styles.textContainer}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.description}>{description}</Text>
        <View style={styles.buttonContainer}>
          <TouchableOpacity onPress={handlePrevious}>
            <Text style={styles.buttonText}>Previous</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={handleNext}>
            <Text style={styles.buttonText}>Next</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: 300,
    height: 200,
  },
  dotContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    marginVertical: 10,
  },
  dot: {
    width: 10,
    height: 10,
    borderRadius: 5,
    margin: 5,
    backgroundColor: 'rgba(0,0,0,0.2)',
  },
  activeDot: {
    backgroundColor: 'rgba(255,255,255,0.9)',
  },
  textContainer: {