React Native：模态屏幕不会通过点击关闭

Question

在我的 RN 0.62.2 app/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> 样式，给它一个高度，然后您可以点击它来工作。

React Native：模态屏幕不会通过点击关闭

React Native: Modal screen is not closing with a tap

image

react-native

react-native-modal