如何在反应本机中使用列表中的模态（每个列表项的特定模态）？

Question

我制作了一个自定义列表组件（在 React Native 中），它显示可触摸的图像和一些描述文本。我需要每个图像打开一个特定的模式；但我不知道怎么办！！我应该在哪里以及如何编码模态？ ...这是我的照片列表组件：

export class CustomGallery extends Component {

  render() {
    let {list} = this.props;
    return (
      <View style={styles.container}>
        <FlatList
          numColumns={4}
          data={list}
          renderItem={({ item}) => (
            <View style={styles.views}>
              <TouchableOpacity style={styles.touch} >
                <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>
          )}
        />
      </View>
    );
  }
}

Answer 1

我不确定你是如何设置图像的。但无论如何，下面的方法是使用动态数据打开模态的示例。

import React, {useState} from "react";
import { Button, TouchableOpacity, FlatList, Modal, Text } from "react-native";

function App() {
    const [value, setValue] = useState("");

    const DATA = [
      {
        id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
        title: 'First Item',
      },
      {
        id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
        title: 'Second Item',
      },
      {
        id: '58694a0f-3da1-471f-bd96-145571e29d72',
        title: 'Third Item',
      },
    ];

    return (
      <>
        <FlatList 
        data={DATA}
        renderItem={({item}) => (
          <TouchableOpacity onPress={() => setValue(item.title)}>
            <Text>{item.title}</Text>
          </TouchableOpacity>
        )}
        />

        <Modal visible={value}>
          <Text>{value}</Text>
          <Button title="close" onPress={() => setValue("")} />
        </Modal>
      </>
    )
}

export default App;

Answer 2

对于 Modal 你可以使用 modal 从 material-ui - https://material-ui.com/components/modal/

Modal 组件在背景组件前面呈现其 children 节点。简单和基本的例子就像弹出一条确认消息，询问您是否确实要删除特定信息。

根据您的代码，我猜您想在单击图像时使用 modal 显示有关图像的信息。

这里我添加了Modal组件：

import React from 'react';
import Modal from '@material-ui/core/Modal';

export class CustomGallery extends Component {
    constructor() {
        super();
        this.state = {
          modalOpen: false,
          snackOpen: false,
          modalDeleteOpen: false,
        };
      }

      
  handleModalOpen = () => {
    this.setState({ modalOpen: true });
  }

  handleModalClose = () => {
    this.setState({ modalOpen: false });
  }

    render() {
      let {list} = this.props;
      return (
        <View style={styles.container}>
          <FlatList
            numColumns={4}
            data={list}
            renderItem={({ item}) => (
              <View style={styles.views}>
                <TouchableOpacity style={styles.touch} >
                   
                    <ImageBackground
                    style={styles.img}
                    onClick={() => this.handleModalOpen()}
                    >
                    { item.photo }
                    </ImageBackground>
                    <Modal
                     open={this.state.modalOpen}
                     onClose={this.handleModalClose}
                     closeAfterTransition
                    >
                        <Text style={styles.txt}>{item.name}</Text>
                        <Text style={styles.txt}>{item.key}</Text>
                        <Text style={styles.txt}>{item.describtion}</Text>
                    </Modal>
                </TouchableOpacity>
              </View>
            )}
          />
        </View>
      );
    }
  }

如何在反应本机中使用列表中的模态（每个列表项的特定模态）？

How to use the modal in the list in react native (a specific Modal for each list item)?

react-native

modal-dialog

image-gallery

flatlist

multimodal