如何在React Native中创建带标题的动态FlatList模态画廊？

嘿，我来帮你搞定这个需求！其实把功能拆解开来就很清晰了，咱们直接上代码+思路，你可以直接拿去改改就能用：

整体思路 #

• 用React Native自带的Modal组件做弹窗容器，控制显示/隐藏
• 模态框内分为两部分：顶部的标题栏+下方的横向（或纵向）FlatList图片画廊
• 定义动态数据源，每个画廊项包含标题和对应的图片列表
• 通过点击触发按钮，切换模态框的显示状态并传入当前选中的画廊数据

完整代码示例 #

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

// 示例动态数据源：每个画廊有标题和图片列表
const galleryData = [
  {
    title: "自然风光",
    images: [
      "https://picsum.photos/id/1018/400/300",
      "https://picsum.photos/id/1019/400/300",
      "https://picsum.photos/id/1020/400/300",
      "https://picsum.photos/id/1021/400/300"
    ]
  },
  {
    title: "城市建筑",
    images: [
      "https://picsum.photos/id/1031/400/300",
      "https://picsum.photos/id/1032/400/300",
      "https://picsum.photos/id/1033/400/300"
    ]
  }
];

const GalleryModal = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [currentGallery, setCurrentGallery] = useState(null);

  // 打开模态框并设置当前选中的画廊
  const openGallery = (gallery) => {
    setCurrentGallery(gallery);
    setIsModalVisible(true);
  };

  // 关闭模态框
  const closeModal = () => {
    setIsModalVisible(false);
    setCurrentGallery(null);
  };

  // FlatList的图片项渲染
  const renderImageItem = ({ item }) => (
    <View style={styles.imageContainer}>
      <Image source={{ uri: item }} style={styles.galleryImage} resizeMode="cover" />
    </View>
  );

  return (
    <View style={styles.container}>
      {/* 触发按钮：可以根据你的需求改成列表或其他组件 */}
      {galleryData.map((gallery, index) => (
        <TouchableOpacity 
          key={index}
          style={styles.galleryButton}
          onPress={() => openGallery(gallery)}
        >
          <Text style={styles.buttonText}>打开{gallery.title}画廊</Text>
        </TouchableOpacity>
      ))}

      {/* 模态画廊 */}
      <Modal
        animationType="slide"
        transparent={true}
        visible={isModalVisible}
        onRequestClose={closeModal}
      >
        <View style={styles.modalOverlay}>
          <View style={styles.modalContent}>
            {/* 标题栏 */}
            <View style={styles.modalHeader}>
              <Text style={styles.modalTitle}>{currentGallery?.title}</Text>
              <TouchableOpacity onPress={closeModal} style={styles.closeButton}>
                <Text style={styles.closeButtonText}>×</Text>
              </TouchableOpacity>
            </View>

            {/* 图片FlatList */}
            <FlatList
              data={currentGallery?.images}
              renderItem={renderImageItem}
              keyExtractor={(item, index) => index.toString()}
              horizontal={true}
              showsHorizontalScrollIndicator={false}
              contentContainerStyle={styles.flatListContent}
            />
          </View>
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f5f5f5"
  },
  galleryButton: {
    padding: 15,
    backgroundColor: "#2196F3",
    borderRadius: 8,
    marginVertical: 10,
    width: "80%"
  },
  buttonText: {
    color: "white",
    fontSize: 16,
    textAlign: "center"
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: "rgba(0,0,0,0.5)",
    justifyContent: "center",
    alignItems: "center"
  },
  modalContent: {
    width: "90%",
    backgroundColor: "white",
    borderRadius: 12,
    padding: 15
  },
  modalHeader: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: 15
  },
  modalTitle: {
    fontSize: 20,
    fontWeight: "bold",
    color: "#333"
  },
  closeButton: {
    padding: 5,
    backgroundColor: "#eee",
    borderRadius: 15,
    width: 30,
    height: 30,
    justifyContent: "center",
    alignItems: "center"
  },
  closeButtonText: {
    fontSize: 20,
    color: "#666"
  },
  flatListContent: {
    gap: 10
  },
  imageContainer: {
    width: 250,
    height: 200,
    borderRadius: 8,
    overflow: "hidden"
  },
  galleryImage: {
    width: "100%",
    height: "100%"
  }
});

export default GalleryModal;

关键部分说明 #

1. 模态框控制：用isModalVisible状态控制显示，currentGallery存储当前选中的画廊数据，确保标题和图片列表对应
2. FlatList配置：设置horizontal={true}实现横向滚动，showsHorizontalScrollIndicator={false}隐藏滚动条，contentContainerStyle可以调整图片间距
3. 样式优化：半透明背景的modalOverlay让模态框更有层次感，modalContent做了圆角和内边距，提升视觉体验
4. 动态适配：数据源galleryData可以根据你的实际需求动态生成，比如从API获取数据后直接赋值即可

你可以根据自己的UI需求调整样式（比如图片大小、模态框宽度、按钮样式等），也可以把横向滚动改成纵向，只需要把horizontal改成false就行～

内容的提问来源于stack exchange，提问作者Lavkush Tari