ReactNative, Image 크기 조절하기

react-native에서의 image 다루기는

웹에서 css를 통해 다루는것보다

조금 더 까다로운것같다.

 

이유는 auto라는 사기적인 옵션이

RN에는 존재하지않기 때문인것같다.

 

* 목표: 가로는 화면비율, 세로는 이미지 크기에 맞게 떨어지게 해보자

// Web이었다면?
width: 100%;
height: auto;
object-fit: contain;

 

웹에서는 이렇게나 간단한걸

우리는 약간은 길고 고생스럽게 해야한다.

import React, { useState } from 'react';
import { Image, Dimension } from 'react-native';

function ImageTestModule({ imagePath }) {
  const [height, setHeight] = useState(0);
  const { width } = Dimension.get('window');
  Image.getSize(imagePath, (w, h) => {
    setHeight(h * (width / w));
  });
  
  return (
    <Image
      style={{ width: '100%' }}
      source={{ uri: imagePath, height }}
      resizeMode='cover'
    />
  );
}

 

다소, 복잡하고 길어보이지만

완벽하게 원하던 바를 달성할수있다.