带有react-native-image-zoom-viewer的后退按钮事件监听器

Question

我正在尝试使用插件react-native-image-zoom-viewer来显示图像预览，并且我想实现当用户单击Android后退按钮时关闭模式的简单目标。closeModal但是，单击时不会触发处理程序函数。

我已经尝试closeModal用非匿名函数替换，但仍然没有结果。我该如何解决这个问题？

感谢帮助！

import ImageViewer from 'react-native-image-zoom-viewer'
import { BackHandler, Modal } from 'react-native'
import React, { useEffect, useState } from 'react'

const [isModalVisible, setModalVisible] = useState(false)

const closeModal = () => {
  if (isModalVisible) {
    setModalVisible(false)
  }
}

useEffect(() => {
  BackHandler.addEventListener('hardwareBackPress', closeModal)
  return () => BackHandler.removeEventListener('hardwareBackPress', closeModal)
}, [])


// Here is how I call the modal in the jsx
<Modal transparent visible={isModalVisible}>
  <ImageViewer
    enableSwipeDown
    imageUrls={[
      {
        url: picture.url_min,
      },
    ]}
    onSwipeDown={closeModal}
    renderIndicator={() => null}
    saveToLocalByLongPress={false}
  />
</Modal>

Answer 1

希望这适用于您的项目，我只需在 Modal 中添加 onRequestClose={}

const closeModal = () => { if (isModalVisible) { setModalVisible(false) } }

模态透明visible={isModalVisible} onRequestClose={closeModal} >

并将您的关闭函数置于 onRequestClose={}