React Native：模态屏幕无法通过点击关闭

Question

在我的 RN 0.62.2 应用程序/Android 模拟器中，我正在寻找一种方法来关闭显示图像的模式，只需点击屏幕而不是放置关闭按钮。这是应用程序应执行的操作：

1. an image is displayed on screen
2. clicking the image pops up a modal screen which fill the width of the whole screen.
3. user can zoom in and out of the image on modal screen  
4. as soon as a user taps the modal screen, then the modal screen is closed.

这是渲染代码：

      import FastImage from 'react-native-fast-image';
      import Modal from 'react-native-modal';
      import ReactNativeZoomableView from '@dudigital/react-native-zoomable-view/src/ReactNativeZoomableView';
      const [modalDialog, setModalDialog] = useState(null);

      return (
            <React.Fragment>
            <TouchableOpacity onPress={()=>setModalDialog(index)}>  //Touch triggers popping up of modal below
                <FastImage   //<<<===equivalent of Image. The image shown in square box
                    source={{uri:img_source}} 
                    resizeMode={FastImage.resizeMode.cover} 
                    style={{
                        width:width, 
                        height:ht, 
                        verticalAlign:0,
                        paddingTop:0,
                    }}
                />
            </TouchableOpacity>

            <TouchableOpacity onPress={()=> setModalDiaglog(null)}>  //<<<===press shall close modal. But it is NOT
                <Modal isVisible={modalDialog===index}>
                    
                        <ReactNativeZoomableView  //<<<===zoom in and out of image
                            maxZoom={3}
                            minZoom={0.5}
                            zoomStep={0.5}
                            initialZoom={1}
                            bindToBorders={true}
                            captureEvent={true}
                        >
                            <FastImage //<<==show image with full width of the device screen
                                source={{uri:img_source}} 
                                resizeMode={FastImage.resizeMode.cover} 
                                style={{
                                    width:modalWidth, 
                                    height:modalHt, 
                                    verticalAlign:0,
                                    paddingTop:0,
                                }}
                            />
                        </ReactNativeZoomableView>
                    
                </Modal>
            </TouchableOpacity>
            </React.Fragment>
            );

上面的代码可以通过

1-3

工作，但不能通过

4

工作。问题在于，模式屏幕无法在 Android 模拟器上关闭（模仿鼠标左键点击）。尝试将

<TouchableOpacity>

放入

<Modal>

内部，但没有成功。

<TouchableOpacity>

旁边的

<Modal>

只是没有响应按下。应用程序如何通过点击关闭

Modal

？

Answer 1

如果没有

flex:1

，高度可能会很小。

所以你可以将

flex:1

添加到

<TouchableOpacity>

样式，给它一个高度，然后你就可以点击它来工作。

Answer 2

将

flex: 1

设置为

<TouchableOpaciity>

不适用于处理react-native-fast-image上的点击事件。 这是我的代码

<TouchableOpacity
  style={{ backgroundColor: "yellow", flex: 1, width: 500, height: 500 }}
  // key={'notification-' + notificatonData.id}
  onPress={() => { console.log("click event......") }}
>
  <PlaceHolderImage
    source={{
      uri: "http://hegsaredu.hegsarsoftware.com/upload/attachment/1710514312-65f4608830d5a.png",
      priority: FastImage.priority.normal,
      headers: { Authorization: 'someAuthToken' },
    }}
    style={{ width: 100, height: 100 }}
    key={"image-" + 9999}
  // openAttachment={() => openAttachment(notificatonData)}
  />
</TouchableOpacity>

请查看随附的问题动画。