如何在React Native列表中为每个列表项配置专属Modal

你需要先从react-native库中导入Modal组件，再按照下方逻辑修改代码即可实现需求：

实现逻辑 #

• 给组件添加state，记录Modal的显隐状态和当前选中的列表项数据
• 给每个图片的点击事件绑定赋值逻辑，点击时把当前项存入state并打开Modal
• Modal放在根容器View中，和FlatList同级，渲染内容使用state中存储的选中项数据

修改后完整代码 #

import { Component } from 'react';
import { View, FlatList, TouchableOpacity, ImageBackground, Text, Modal, StyleSheet } from 'react-native';

export class CustomGallery extends Component {
  // 初始化state
  state = {
    isModalVisible: false,
    activeItem: null
  }

  // 打开Modal的方法
  openModal = (item) => {
    this.setState({
      activeItem: item,
      isModalVisible: true
    })
  }

  // 关闭Modal的方法
  closeModal = () => {
    this.setState({
      isModalVisible: false,
      activeItem: null
    })
  }

  render() {
    let {list} = this.props;
    const { isModalVisible, activeItem } = this.state;
    return (
      <View style={styles.container}>
        <FlatList
          numColumns={4}
          data={list}
          renderItem={({ item}) => (
            <View style={styles.views}>
              <TouchableOpacity style={styles.touch} onPress={() => this.openModal(item)} >
                <ImageBackground
                  style={styles.img}
                  source={{ uri: item.photo }}
                >
                  <Text style={styles.txt}>{item.name}</Text>
                  <Text style={styles.txt}>{item.key}</Text>
                  <Text style={styles.txt}>{item.describtion}</Text>
                </ImageBackground>
              </TouchableOpacity>
            </View>
          )}
        />

        {/* 专属Modal组件，和FlatList同级 */}
        <Modal
          visible={isModalVisible}
          onRequestClose={this.closeModal}
          animationType="slide" // 可按需修改动画效果
        >
          {activeItem && (
            <View style={styles.modalContainer}>
              {/* 这里自定义Modal内部的展示内容，示例如下 */}
              <TouchableOpacity onPress={this.closeModal} style={styles.closeBtn}>
                <Text>关闭</Text>
              </TouchableOpacity>
              <Image source={{uri: activeItem.photo}} style={styles.modalImg}/>
              <Text>{activeItem.name}</Text>
              <Text>{activeItem.describtion}</Text>
            </View>
          )}
        </Modal>
      </View>
    );
  }
}

// 补充Modal相关的样式，可按需调整
const styles = StyleSheet.create({
  container: {
    // 保留你原来的container样式
  },
  views: {
    // 保留你原来的views样式
  },
  touch: {
    // 保留你原来的touch样式
  },
  img: {
    // 保留你原来的img样式
  },
  txt: {
    // 保留你原来的txt样式
  },
  modalContainer: {
    flex: 1,
    padding: 20,
    alignItems: 'center',
    justifyContent: 'center'
  },
  closeBtn: {
    position: 'absolute',
    top: 40,
    right: 20,
    zIndex: 9
  },
  modalImg: {
    width: 300,
    height: 300,
    marginBottom: 20
  }
})

说明 #

• Modal不需要写在FlatList的renderItem里，和FlatList同级放置即可，避免重复渲染多个Modal实例
• 如果需要自定义Modal的背景透明度、动画效果，可以直接修改Modal组件的对应props，或者给modalContainer加半透明背景实现蒙层效果

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