如何同时使用“模态”和“图像”以在网格（小图像）和“模态”（全屏）中显示图像

Question

在我的RN 0.62.2应用程序中，使用2段代码在网格中显示图像（例如，每行显示2张图像），并在Modal中以全屏显示图像。这是代码：

import FastImage from 'react-native-fast-image';
import Modal from 'react-native-modal';
import ReactNativeZoomableView from '@dudigital/react-native-zoomable-view/src/ReactNativeZoomableView';

 return (
          <>
           <TouchableOpacity onPress={()=>{setModalDialog(index)}} >  //<<==show image in grid of half width square
            <FastImage 
                source={{uri:img_source}} 
                resizeMode={FastImage.resizeMode.cover} 
                key={index}
                style={{
                    width:width, 
                    height:ht, 
                    verticalAlign:0,
                    paddingTop:0,
                }}
              />
             </TouchableOpacity>
                    
             <Modal isVisible={modalDialog===index} style={styles.modal} onBackdropPress={()=>setModalDialog(null)} >  //<<==show image in modal with full screen width after user click on grid
                <TouchableOpacity style={styles.modalOpacity} onPress={()=>{setModalDialog(null)}}>
                    <ReactNativeZoomableView
                        maxZoom={3}
                        minZoom={1}
                        zoomStep={0.5}
                        initialZoom={1}
                        bindToBorders={true}
                        captureEvent={true}
                    >
                        <FastImage 
                            source={{uri:img_source}} 
                            resizeMode={FastImage.resizeMode.cover} 
                            style={{
                                width:modalWidth, 
                                height:modalHt, 
                                verticalAlign:0,
                                paddingTop:0,
                            }}
                        />
                    </ReactNativeZoomableView>
                </TouchableOpacity>
            </Modal>
                </>
                );

const style = StyleSheet.create({
    modal: {
        margin:0,
        flex:1,
        alignItems: 'center',
        //backgroundColor: '#2196f3',
        justifyContent: 'center',
        
    },
    modealOpacity: {
        flex:1,
    },
    row:{
        paddingTop:0,
    },
});

我正在执行代码重构，并尝试将2个代码合并为一个。这是我尝试过的：

return (
            <Modal isVisible={modalDialog===index} style={[styles.modal, {width:modalWidth, height:modalHt}]} onBackdropPress={()=>setModalDialog(null)} animationType="slide" transparent={false}>  //<<==wrap the grid image within Modal
            <TouchableOpacity onPress={()=>{setModalDialog(index)}} >
                <FastImage 
                    source={{uri:img_source}} 
                    resizeMode={FastImage.resizeMode.cover} 
                    key={index}
                    style={{
                        width:width, //<<==ex, half width square grid. 2 grids per row
                        height:ht, 
                        verticalAlign:0,
                        paddingTop:0,
                    }}
                />
            </TouchableOpacity>
            </Modal>
        );

但是上面的代码在屏幕上显示的只是一个没有图像的空白屏幕。有没有一种方法可以在一段代码中在模式（全屏）和网格图像（一行中有2张图像）之间切换？否则将其放入一个代码中太复杂了。