React Native，带有文本的图像滑块框

import React, { useState } from 'react';
import { View, Text, Image, StyleSheet, FlatList } from 'react-native';

const data = [
  {
    id: 1,
    image: 'https://example.com/image1.jpg',
    text: 'Image 1 Description',
  },
  {
    id: 2,
    image: 'https://example.com/image2.jpg',
    text: 'Image 2 Description',
  },
  // Add more images and texts as needed
];

const ImageSlider = () => {
  const [currentIndex, setCurrentIndex] = useState(0);

  const renderItem = ({ item }) => (
    <View style={styles.slide}>
      <Image source={{ uri: item.image }} style={styles.image} />
      <Text style={styles.text}>{item.text}</Text>
    </View>
  );

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={(item) => item.id.toString()}
        horizontal
        showsHorizontalScrollIndicator={false}
        onMomentumScrollEnd={() => setCurrentIndex((currentIndex + 1) % data.length)}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  slide: {
    width: 300,
    height: 200,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 10,
  },
  image: {
    width: '100%',
    height: '80%',
  },
  text: {
    fontSize: 16,
    textAlign: 'center',
  },
});

export default ImageSlider;