[TIL] 내배캠4기-React Native-72일차

• React-native 이미지 확대

프로젝트 추가 기능으로, 이미지를 클릭하면 모달 창이 뜨고, 거기서 줌이나 스와이프같은 액션이 되도록 하고싶었다.
찾아보니 꽤나... 어렵고...
인도인 유튜브를 통해 구현해봤는데 이건 focal이 center로 고정되어 줌을 하면 이미지의 정가운데 부분만 확대된다는 점이 문제였다.

import { StyleSheet, Modal, Text, Animated } from "react-native";
import { PinchGestureHandler, State } from "react-native-gesture-handler";
import styled from "@emotion/native";
import { useState } from "react";
const ImgDetail = ({ main_img }) => {
scale = new Animated.Value(1);
  onZoomEvent = Animated.event(
    [
      {
        nativeEvent: { scale: this.scale },
      },
    ],
    {
      useNativeDriver: true, // 중요..
    }
  );

  onZoomStateChange = (event) => {
    if (event.nativeEvent.oldState == State.ACTIVE) {
      Animated.spring(this.scale, {
        toValue: 1,
        useNativeDriver: true,
      }).start();
    }
  };
   return (
    <>
    <ImgContainer>
        <ImgBG source={{ uri: main_img }} imageStyle={{ opacity: 0.6 }} />
           <PinchGestureHandler
          onGestureEvent={this.onZoomEvent}
          onHandlerStateChange={this.onZoomStateChange}
        >
          <Animated.Image
            resizeMode="contain"
            source={{ uri: main_img }}
            style={{
              ...StyleSheet.absoluteFill,
              transform: [{ scale: this.scale }],
            }}
          />
        </PinchGestureHandler>
      </ImgContainer>
    </>
  );
  };