0

在我的 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点击关闭？

4

1 回答 1

1

没有flex:1.

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

于 2020-07-22T00:49:12.657 回答