React Native onPress 在使用模态时不起作用

Posted 2023-04-18

【中文标题】React Native onPress 在使用模态时不起作用

【英文标题】：React Native onPress not working while using modal

【发布时间】：2019-04-26 02:42:26

【问题描述】：

我有一个显示图像的模式，我正在使用一个图像查看器，它将为我显示图像并缩放等。因为我无法直接控制模式的样式，所以图像查看器提供了一个选项为 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>
    )
  

当我按下关闭或下载时，什么都没有发生。我也试过 TouchableHighlight。

这些是我的风格

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,
  ,
)

【问题讨论】：

如何在你的js文件中调用这个modal？

有一个父组件在 中显示图像，当单击其中一个图像时，会显示此模式。 props.showModal(image) key=image.id>

ImageViewer 应该在Modal 中使用，不是吗？它在哪里？还有你的onCloseModal() prop 函数的定义在哪里？你如何将它传递给ImageViewer？请改进您的问题。

@Milore，我已经添加了完整的代码。

您是否尝试过增加标题的 zIndex ？

【参考方案1】：

我遇到了同样的问题。检查您的 TouchableOpacity 是从“react-native”模块导入的，而不是从其他任何模块导入的。 （我的在 react-native-gesture-handler 中。）