Как использовать модальное окно и изображение вместе, чтобы показать изображение как в сетке (маленькое изображение), так и в модальном (полный экран) - PullRequest
Новая
       22

Как использовать модальное окно и изображение вместе, чтобы показать изображение как в сетке (маленькое изображение), так и в модальном (полный экран)

0 голосов
/ 06 августа 2020

В моем приложении RN 0.62.2 используются 2 фрагмента кода для отображения изображения в сетке (например, 2 изображения в одной строке) и в полноэкранном режиме в модальном режиме. Вот код: 

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 изображения в одной строке) в одном фрагменте кода? Или это слишком сложно поместить в один фрагмент кода.

...