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

Posted 2023-02-16

【中文标题】React Native：模态屏幕未通过点击关闭

【英文标题】：React Native: Modal screen is not closing with a tap

【发布时间】：2020-11-10 06:43:01

【问题描述】：

在我的 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？

【问题讨论】：

您是否尝试将<TouchableOpacity> 放在<ReactNativeZoomableView> 和<Modal> 与flex:1 之间？

是的，我做过也没有工作。将 flex:1 添加到 TouchableOpacity 并没有区别。

import TouchableOpacity from 'react-native'; 你是从 react-native 导入的吗？不要从react-native-gesture-handler导入

我猜它不设置高度就不会散开，flex:1让它散开到容器中，这样有它的高度然后可以触摸？

如果没有 flex:1，高度可能会很小。如果您发布将投票。谢谢。

【参考方案1】：

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

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