[Feat] image slider and Zoom 기능 완성

ChatMinder · Jan 18, 2022 · d8366de · d8366de
1 parent e73f120
commit d8366de
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 146 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "react-native-gesture-handler": "~1.10.2",
     "react-native-image-crop-picker": "^0.37.2",
     "react-native-image-slider-box": "^1.1.14",
+    "react-native-image-zoom-viewer": "^3.0.1",
     "react-native-modal": "^13.0.0",
     "react-native-pager-view": "^5.4.9",
     "react-native-reanimated": "~2.2.0",

diff --git a/screens/Category.js b/screens/Category.js
@@ -76,6 +76,8 @@ const Category = ({ navigation }) => {
     setLoading(false);
   };
 
+  //console.log(tagData);
+
   return (
     <Background>
       <Wrapper>

diff --git a/screens/DrawerNavScreens/detailText.js b/screens/DrawerNavScreens/detailText.js
@@ -10,9 +10,12 @@ import {
   ActivityIndicator,
   StatusBar,
   Alert,
+  Modal,
 } from 'react-native';
 import styled from 'styled-components/native';
+// TODO 혼용 안되면 택1하기
 import { SliderBox } from 'react-native-image-slider-box';
+import ImageViewer from 'react-native-image-zoom-viewer';
 import RNUrlPreview from 'react-native-url-preview';
 import TextR from '../../shared/components/TextR';
 import TextB from '../../shared/components/TextB';
@@ -46,13 +49,13 @@ const detailText = ({ route, navigation }) => {
   const [imageArr, setImageArr] = useState(
     route.params.images.map((item) => `${baseURL}/${item.url}`)
   );
-
-  useEffect(() => {
-    console.log(route.params.images);
-    // route.params.images
-    //   ? setImageArr(route.params.images.map((item) => `${baseURL}/${item.url}`))
-    //   : null;
-  }, []);
+  let newArr = [];
+  for (let i = 0; i < imageArr.length; i++) {
+    newArr.push({
+      url: imageArr[i],
+    });
+    //console.log(newArr);
+  }
 
   const token = useSelector((state) => state.auth.accessToken);
   //console.log(route.params);
@@ -158,6 +161,16 @@ const detailText = ({ route, navigation }) => {
     }
   };
 
+  const [zoom, setZoom] = useState({
+    index: 0,
+    modalVisible: false,
+  });
+
+  const openZoom = (index) => {
+    setZoom({ index: index, modalVisible: true });
+    //console.log(imageArr[zoom.index]);
+  };
+
   return (
     <Wrapper>
       <StatusBar
@@ -198,15 +211,35 @@ const detailText = ({ route, navigation }) => {
       {/* 이미지인 경우 */}
 
       {route.params.images.length !== 0 ? (
-        <ImageBox>
-          <SliderBox
-            images={imageArr}
-            onCurrentImagePressed={(index) =>
-              console.warn(`image ${index} pressed`)
-            }
-            sliderBoxHeight="100%"
-          />
-        </ImageBox>
+        <>
+          <ImageBox>
+            <SliderBox
+              images={imageArr}
+              onCurrentImagePressed={(index) => {
+                //console.warn(`image ${index} pressed`);
+                openZoom(index);
+              }}
+              sliderBoxHeight="100%"
+            />
+          </ImageBox>
+
+          <Modal
+            visible={zoom.modalVisible}
+            transparent={true}
+            onRequestClose={() => setZoom({ ...zoom, modalVisible: false })}
+          >
+            <ImageViewer
+              imageUrls={newArr}
+              index={zoom.index}
+              onSwipeDown={() => {
+                //console.log('onSwipeDown');
+                setZoom({ ...zoom, modalVisible: false });
+              }}
+              //onMove={(data) => console.log(data)}
+              enableSwipeDown={true}
+            />
+          </Modal>
+        </>
       ) : (
         <View />
       )}

diff --git a/shared/components/MemoItem.js b/shared/components/MemoItem.js
@@ -14,6 +14,7 @@ import EmptyBookmark from '../assets/emptyBookmark.svg';
 import FulledBookmark from '../assets/fulledBookmark.svg';
 import { TextSize } from '../styles/FontStyle';
 import CaptionText from './CaptionText';
+import Images from './Images';
 
 const MemoItem = ({ memo }) => {
   const navigation = useNavigation();
@@ -86,90 +87,6 @@ const MemoItem = ({ memo }) => {
     setLoading(false);
   };
 
-  const Images = ({ imgCnt }) => {
-    const baseURL = 'https://image.chatminder.app';
-    if (!imgCnt) {
-      return null;
-    } else if (imgCnt === 1) {
-      return (
-        <MemoImageItem>
-          <Img1
-            source={{
-              uri: `${baseURL}/${memo.images[0].url}`,
-            }}
-          />
-        </MemoImageItem>
-      );
-    } else if (imgCnt === 2) {
-      return (
-        <MemoImageItem>
-          <MultiImgContainer>
-            <Img2
-              source={{
-                uri: `${baseURL}/${memo.images[0].url}`,
-              }}
-            />
-            <Img2
-              source={{
-                uri: `${baseURL}/${memo.images[1].url}`,
-              }}
-            />
-          </MultiImgContainer>
-        </MemoImageItem>
-      );
-    } else if (imgCnt === 3) {
-      return (
-        <MemoImageItem>
-          <MultiImgContainer>
-            <Img3_1
-              source={{
-                uri: `${baseURL}/${memo.images[0].url}`,
-              }}
-            />
-            <ImgMorethan3>
-              <Img3_2
-                source={{
-                  uri: `${baseURL}/${memo.images[1].url}`,
-                }}
-              />
-              <Img3_2
-                source={{
-                  uri: `${baseURL}/${memo.images[2].url}`,
-                }}
-              />
-            </ImgMorethan3>
-          </MultiImgContainer>
-        </MemoImageItem>
-      );
-    } else if (imgCnt > 3) {
-      return (
-        <MemoImageItem>
-          <MultiImgContainer>
-            <Img3_1
-              source={{
-                uri: `${baseURL}/${memo.images[0].url}`,
-              }}
-            />
-            <ImgMorethan3>
-              <Img3_2
-                source={{
-                  uri: `${baseURL}/${memo.images[1].url}`,
-                }}
-              />
-              <Img3_2
-                style={{ backgroundColor: '#000000', opacity: 0.5 }}
-                source={{
-                  uri: `${baseURL}/${memo.images[2].url}`,
-                }}
-              />
-              <ImgOverflowText>+{imgCnt - 2}</ImgOverflowText>
-            </ImgMorethan3>
-          </MultiImgContainer>
-        </MemoImageItem>
-      );
-    }
-  };
-
   return (
     <Wrapper>
       {loading && (
@@ -199,7 +116,7 @@ const MemoItem = ({ memo }) => {
           <ChatBubblePoint />
         </PointContainer>
         <MemoContainer onPress={() => handlePress(memo)}>
-          <Images imgCnt={memo.images.length} />
+          <Images imgCnt={memo.images.length} memo={memo} />
 
           <CaptionText memo={memo} />
         </MemoContainer>
@@ -265,51 +182,6 @@ const MemoContainer = styled.View`
   justify-content: flex-start;
 `;
 
-const MemoImageItem = styled.View`
-  width: 100%;
-  height: 225px;
-  margin-bottom: 8px;
-`;
-const Img1 = styled.Image`
-  width: 100%;
-  height: 100%;
-  border-radius: 4px;
-`;
-const MultiImgContainer = styled.View`
-  width: 100%;
-  height: 100%;
-  flex-direction: row;
-  justify-content: space-between;
-`;
-const Img2 = styled.Image`
-  width: 49%;
-  height: 100%;
-  border-radius: 4px;
-`;
-const Img3_1 = styled.Image`
-  width: 60%;
-  height: 100%;
-  border-radius: 4px;
-`;
-const ImgMorethan3 = styled.View`
-  width: 39%;
-  height: 100%;
-  justify-content: space-between;
-`;
-const Img3_2 = styled.Image`
-  width: 100%;
-  height: 49.4%;
-  border-radius: 4px;
-`;
-const ImgOverflowText = styled.Text`
-  position: absolute;
-  left: 41%;
-  top: 68%;
-  font-family: 'Gordita';
-  color: white;
-  font-size: 18px;
-`;
-
 const MemoFooter = styled.View`
   flex-direction: row;
   margin-top: 12px;