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> 内，但没有成功。 <Modal>旁边的<TouchableOpacity>只是没有回应记者。应用如何通过点击关闭Modal？

Answer 1

没有flex:1，高度可能会最小。

所以你可以将flex:1 添加到<TouchableOpacity> 样式，给它一个高度，然后你可以点击它来工作。