React native 在平面列表的印刷机上弹出问题制作模型

我有一个卡片的平面列表，我想在有人按下卡片时显示一个模式。但按卡片似乎没有任何作用，所以我想知道我做错了什么。在顶部的代码中，我定义了模式可见性的状态，如果向下滚动到卡，您将看到onPress更改状态。卡片下面是实际的模式，它使用visible属性的状态来显示它或不显示它

代码：

---

根据您的代码，您需要将toggleModal函数传递给TouchableOpacity以显示您的模型。查看下面的示例以了解更多信息

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

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',
  },
];

export default class App extends Component {
  state = {
    isModalVisible: false
  }

  toggleModal = () => {
    this.setState({
      isModalVisible: !this.state.isModalVisible
    });
  };

  renderItem = ({ item }) => (
    <TouchableOpacity style={styles.item} onPress={this.toggleModal}>
      <Text style={styles.title}>{item.title}</Text>
    </TouchableOpacity>
  )

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <FlatList
          data={DATA}
          renderItem={this.renderItem}
          keyExtractor={item => item.id}
        />
        {
          this.state.isModalVisible &&
          <Modal
            visible={this.state.isModalVisible}
            transparent={true}
            animationType='slide'
            onRequestClose={this.toggleModal}
          >
            <View style={styles.modelStyle}>
              <View style={styles.modelWrapperStyle}>
                <Text>Test</Text>
                <Button title="Cancel" onPress={this.toggleModal} />
              </View>
            </View>
          </Modal>
        }
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 50,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
  modelStyle: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)'
  },
  modelWrapperStyle: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ffffff',
    padding: 20,
    width: '90%'
  }
});

根据您的要求进行更改

---

希望这对你有帮助。无需怀疑。

非常感谢，从未想过要转到可触摸不透明的onPress。现在一切正常

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

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',
  },
];

export default class App extends Component {
  state = {
    isModalVisible: false
  }

  toggleModal = () => {
    this.setState({
      isModalVisible: !this.state.isModalVisible
    });
  };

  renderItem = ({ item }) => (
    <TouchableOpacity style={styles.item} onPress={this.toggleModal}>
      <Text style={styles.title}>{item.title}</Text>
    </TouchableOpacity>
  )

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <FlatList
          data={DATA}
          renderItem={this.renderItem}
          keyExtractor={item => item.id}
        />
        {
          this.state.isModalVisible &&
          <Modal
            visible={this.state.isModalVisible}
            transparent={true}
            animationType='slide'
            onRequestClose={this.toggleModal}
          >
            <View style={styles.modelStyle}>
              <View style={styles.modelWrapperStyle}>
                <Text>Test</Text>
                <Button title="Cancel" onPress={this.toggleModal} />
              </View>
            </View>
          </Modal>
        }
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 50,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
  modelStyle: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)'
  },
  modelWrapperStyle: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ffffff',
    padding: 20,
    width: '90%'
  }
});