RnMultibundler/src/app/screens/components/HomeCarousel.tsx

import React, {useState} from 'react';
import {Image, StyleSheet, TouchableOpacity, View} from 'react-native';
import Carousel from 'react-native-reanimated-carousel';

const CAROUSEL_ASPECT_RATIO = 350 / 80; // 轮播图宽高比
const INDEX_BACKGROUND_CURRENT = '#FFFFFF';
const INDEX_BACKGROUND = 'rgba(255, 255, 255, 0.6)';

type Props = {
  width: number; // 轮播图宽度
  data: {imgUrl: string}[]; // 数据的数组
  onPress?: (index: number) => void; // 点击事件
};

/**
 * @description: 首页轮播图
 */
export default function HomeCarousel(props: Props) {
  const [currentIndex, setCurrentIndex] = useState(0);
  return (
    <View>
      <Carousel
        style={styles.carousel}
        loop
        width={props.width}
        height={props.width / CAROUSEL_ASPECT_RATIO}
        autoPlay={true}
        data={props.data}
        scrollAnimationDuration={3000}
        onScrollEnd={index => {
          setCurrentIndex(index);
        }}
        renderItem={({index}) => {
          return (
            <TouchableOpacity
              onPress={() => {
                props.onPress && props.onPress(index);
              }}>
              <Image
                style={{
                  width: props.width,
                  height: props.width / CAROUSEL_ASPECT_RATIO,
                }}
                source={{uri: props.data[index].imgUrl}}
              />
            </TouchableOpacity>
          );
        }}
      />
      <View style={styles.indexView}>
        <View style={styles.indexContent}>
          {props.data.map((_item, index) => {
            return (
              <View
                key={index}
                style={[
                  styles.indexItem,
                  {
                    backgroundColor:
                      currentIndex === index
                        ? INDEX_BACKGROUND_CURRENT
                        : INDEX_BACKGROUND,
                  },
                ]}
              />
            );
          })}
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  carousel: {
    borderRadius: 10,
    backgroundColor: '#FFFFFF',
  },
  indexView: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    height: 7.5,
  },
  indexContent: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
  },
  indexItem: {
    flexShrink: 1,
    width: 7.5,
    height: 2.5,
    marginHorizontal: 1.5,
    borderRadius: 2,
  },
});