이미지 비율 자동 계산하기 / 이미지 고정값 없이 사이즈 auto로 설정하기

import React, { useState } from 'react';
import { View, Image, Platform } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import styles from './styles';
 
const DetailScreen = () => {
  // 이미지 비율을 저장할 상태 객체 (파일명을 키로 사용)
  const [imageRatios, setImageRatios] = useState<{ [key: string]: number }>({});
  const insets = useSafeAreaInsets(); // 안전 영역 설정
 
  // 이미지가 로드되면 이미지의 비율 계산
  const onImageLoad = (filename: string, event: any) => {
    const { width, height } = event.nativeEvent.source;
    if (width && height) {
      setImageRatios((prev) => ({
        ...prev,
        [filename]: width / height,
      }));
    }
  };
 
  return (
    <View style={[styles.container, { paddingBottom: Platform.OS === 'ios' ? insets.bottom : 20 }]}>
      <View style={styles.content}>
        {data?.fileList.length > 0 &&
          data.fileList.map((file, index) => (
            <View
              key={`file-${file.filename}`}
              style={{
                width: '100%',
                marginBottom: 15,
              }}>
              <Image
                source={{ uri: file.realPath }}
                style={{
                  width: '100%',
                  aspectRatio: imageRatios[file.filename] || 1.5,
                }}
                resizeMode="contain"
                onLoad={(event) => onImageLoad(file.filename, event)}
              />
            </View>
          ))}
      </View>
    </View>
  );
};
 
export default DetailScreen;

const [imageRatios, setImageRatios] = useState<{ [key: string]: number }>({});

const onImageLoad = (filename: string, event: any) => {
  const { width, height } = event.nativeEvent.source;
  if (width && height) {
    setImageRatios((prev) => ({
      ...prev,
      [filename]: width / height,
    }));
  }
};

<Image
  source={{ uri: file.realPath }}
  style={{
    width: '100%',
    aspectRatio: imageRatios[file.filename] || 1.5,
  }}
  resizeMode="contain"
  onLoad={(event) => onImageLoad(file.filename, event)}
/>