<Image /> - React Native, Next.js

React Native에서 Image 로 아이콘설치 예

//import { View, Text, Image, Platform } from "react-native";

<Image
    source={focused ? Icons.pinwheel : Icons.pinwheelOutline}
    resizeMode="contain"
    style={{
      height: 35,
      width: 35,
      tintColor: focused ? COLORS.primary : COLORS.darkerGray,
    }}
  />

특히 아이콘의 크기 조절 목적으로 resizeMode 를 많이 쓰게 됨

• cover: Scale the image uniformly (maintain the image's aspect ratio) so that
  • both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding)
  • at least one dimension of the scaled image will be equal to the corresponding dimension of the view (minus padding)
• contain: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).
• stretch: Scale width and height independently, This may change the aspect ratio of the src.
• repeat: Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio, unless it is larger than the view, in which case it will be scaled down uniformly so that it is contained in the view.
• center: Center the image in the view along both dimensions. If the image is larger than the view, scale it down uniformly so that it is contained in the view.

참고로  Next.js 에서 <Image />

- import Image from 'next/image'

- 사이즈가 꼭 들어가야 한다. fill={true} 사용가능

- public 폴더안의 이미지는 <Image src="/2.png" width={15} height={15} className={styles.icon} alt='logo" />

- next.config.js 에 등록

const nextConfig = {

   images: {

      domains: [ "image.pexels.com" ],

   }

}

<Image

              src={ xxxxx}

              alt="image"

              width={500}

              height={500}

              className="rounded-t-lg h-[200px] object-cover"

            />