React Native FlatList项布局适配设备横竖屏切换需求

核心实现逻辑：

• 监听屏幕方向变化，动态切换渲染组件
• 竖屏时使用FlatList开启分页模式，每次显示一张图片
• 横屏时直接渲染当前选中的图片，设置全屏样式
• 通过onViewableItemsChanged实时获取FlatList当前显示的图片索引

以下是完整示例代码：

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

// 模拟图片数据源
const imageData = [
  { id: '1', uri: 'https://example.com/image1.jpg' },
  { id: '2', uri: 'https://example.com/image2.jpg' },
  { id: '3', uri: 'https://example.com/image3.jpg' },
];

const ImageGallery = () => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [isLandscape, setIsLandscape] = useState(false);
  
  // 监听屏幕方向变化
  useEffect(() => {
    const updateOrientation = () => {
      const { width, height } = Dimensions.get('window');
      setIsLandscape(width > height);
    };

    // 初始获取方向
    updateOrientation();
    // 添加监听
    const subscription = Dimensions.addEventListener('change', updateOrientation);
    
    return () => subscription?.remove();
  }, []);

  // 获取FlatList当前显示的item索引
  const handleViewableItemsChanged = ({ viewableItems }) => {
    if (viewableItems.length > 0) {
      setCurrentIndex(viewableItems[0].index);
    }
  };

  const viewabilityConfig = {
    itemVisiblePercentThreshold: 50, // 当item可见50%时判定为当前显示项
  };

  if (isLandscape) {
    // 横屏时全屏显示当前图片
    return (
      <View style={styles.fullScreenContainer}>
        <Image
          source={{ uri: imageData[currentIndex].uri }}
          style={styles.fullScreenImage}
          resizeMode="contain" // 可根据需求改为'cover'
        />
      </View>
    );
  }

  // 竖屏时渲染分页FlatList
  return (
    <FlatList
      data={imageData}
      keyExtractor={(item) => item.id}
      horizontal={true}
      pagingEnabled={true}
      showsHorizontalScrollIndicator={false}
      onViewableItemsChanged={handleViewableItemsChanged}
      viewabilityConfig={viewabilityConfig}
      renderItem={({ item }) => (
        <View style={styles.portraitImageContainer}>
          <Image
            source={{ uri: item.uri }}
            style={styles.portraitImage}
            resizeMode="contain"
          />
        </View>
      )}
    />
  );
};

const styles = StyleSheet.create({
  fullScreenContainer: {
    flex: 1,
    backgroundColor: '#000',
  },
  fullScreenImage: {
    flex: 1,
    width: '100%',
    height: '100%',
  },
  portraitImageContainer: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
    justifyContent: 'center',
    alignItems: 'center',
  },
  portraitImage: {
    width: '90%',
    height: '80%',
  },
});

export default ImageGallery;

关键细节说明：

• 使用Dimensions监听屏幕方向变化，判断横竖屏状态
• FlatList开启pagingEnabled实现分页滑动，每次显示一张图片
• 通过onViewableItemsChanged和viewabilityConfig精准获取当前显示的图片索引
• 横屏时使用全屏容器包裹图片，背景设为黑色提升体验，可根据需求调整resizeMode
• 竖屏时限制每个FlatList item的宽高为屏幕宽高，确保单张图片占满屏幕

内容的提问来源于stack exchange，提问作者Jatin Bhuva