1

我制作了一个自定义列表组件（在 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>
    );
  }
}
4

2 回答 2

2

因为Modal您可以modal使用material-ui- https://material-ui.com/components/modal/

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

从您的代码中，我猜您想在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>
      );
    }
  }
于 2021-09-04T08:59:31.343 回答
0

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

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;
于 2021-09-04T08:59:06.600 回答