Reactjs 使用modal时，React Native onPress不工作

我有一个显示图像的模式，我使用一个图像查看器，它将为我显示图像，还可以缩放等。因为我不能直接控制模式的样式，图像查看器提供了一个选项，为renderHeader提供react元素，下面是我的代码

class EventDetailsScreen extends Component {

  constructor(props){
    super(props);
    this.state = {
      token: null,
      event: null,
      eventImages: [],
      isModalVisible: false,
      dataFetched: false,
    }
  }

  showModal = (image) => {
    this.setState({
      isModalVisible: true,
      currentImageIndex: image.index
    });
  }

  closeModal = () => {
    this.setState({isModalVisible: false});
  }

  render() {
    return (
      <Container style={{backgroundColor: "#F5F5F5"}}>
        <BackHeaderComponent {...this.props} headerName="Event Details" />
        <Content contentContainerStyle={{
          flex: 1, 
        }}>
          {
            this.state.dataFetched ?
            <EventDetails 
              {...this.state}
              showModal={this.showModal}
              closeModal={this.closeModal}
            />
            :<LoadingIndicatorcomponent />

          }
        </Content>
      </Container>
    );
  }
}


const EventDetails = props => (
  <ScrollView style={styles.eventContainer}>
      <View>
          <Text style={styles.eventName}>{props.event.name}</Text>
          <Text style={styles.eventDetails}>
              {props.event.from_date} - {props.event.to_date}
          </Text>
      </View>
      <View style={styles.imageContainer}>
          {props.eventImages.map(image => (
            <TouchableHighlight onPress={() => props.showModal(image)} key={image.id}>
              <Image 
                  source={{uri: image.url}}
                  style={styles.image}
              />
            </TouchableHighlight>
          ))}
      </View>
      <ImageViewerModal {...props}></ImageViewerModal>
  </ScrollView>
)

class ImageViewerModal extends Component {
  render(){
    return (
      <Modal 
        visible={this.props.isModalVisible}
        transparent={true}
        animationType="slide"
        onRequestClose={() => this.props.closeModal()}>

          <ImageViewer 
            imageUrls={this.props.eventImages}
            index={this.props.currentImageIndex}
            enableImageZoom={true}
            loadingRender={() => (<LoadingIndicatorcomponent />)}
            renderHeader={() => (
              <View style={modalStyles.header}>

                <TouchableOpacity onPress={this.props.closeModal} style={modalStyles.leftHeader}>
                  <MaterialIcon name="close" size={25} color="#fff"></MaterialIcon>
                </TouchableOpacity>

                <TouchableOpacity onPress={() => this.props.closeModal()} style={modalStyles.rightHeader}>
                  <FeatherIcon name="download" size={25} color="#fff"></FeatherIcon>
                </TouchableOpacity>

              </View>
            )}
          >
          </ImageViewer>
      </Modal>
    )
  }
}

---

我也有同样的问题。检查您的TouchableOpacity是否从“react native”模块导入，而不是从任何其他模块导入。（我的是在react native手势处理程序中。）

如何在js文件中调用此模式？有一个父组件在中显示图像，单击其中一个图像时，将显示此模式。props.showmodel（image）}key={image.id}>

ImageViewer

应该在

Modal

中使用，不是吗？它在哪里？还有，

onCloseModal（）

prop函数的定义在哪里？如何将其传递给

ImageViewer

？请改进您的问题。@Milore，我已经添加了完整的代码。您是否尝试增加标题的zIndex？

const modalStyles = StyleSheet.create({
  header: { 
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  leftHeader: {
    marginTop: 35,
    marginLeft: 25,
    width: 25,
    height: 25,
  },
  rightHeader: {
    marginTop: 35,
    marginRight: 25,
    width: 25,
    height: 25,
  },
})