React Native实现图片轮播组件及性能优化

本文介绍如何使用React Native开发一个图片轮播组件，并通过性能优化提升用户体验。采用FlatList组件实现轮播，同时结合FastImage库提高图片加载性能。

import React, { useState, useRef } from 'react';
import { View, FlatList, Image, Dimensions } from 'react-native';
import FastImage from 'react-native-fast-image';

const Carousel = ({ images }) => {
  const flatListRef = useRef(null);
  const screenWidth = Dimensions.get('window').width;

  const renderItem = ({ item }) => (
    <View style={{ width: screenWidth }}>
      <FastImage
        source={{ uri: item }}
        style={{ flex: 1, height: 200 }}
        resizeMode={FastImage.resizeMode.cover}
      />
    </View>
  );

  return (
    <FlatList
      ref={flatListRef}
      data={images}
      keyExtractor={(item, index) => index.toString()}
      renderItem={renderItem}
      horizontal
      pagingEnabled
      showsHorizontalScrollIndicator={false}
    />
  );
};

// 使用
const ImageCarousel = () => {
  const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];

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

export default ImageCarousel;

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