TIL: RN | Image resizing, Button style - 220928

Lumpen·2022년 9월 29일
0

ReactNative

목록 보기
2/42

Image

기본 사용

import { Image } from 'react-native'

<Image
  style={ styles.image }
  source={require('./my-icon.png')}
 /> 

resizeMode

react native의 Image 컴포넌트 속성인 resizeMode를 이용하면
이미지를 쉽게 resizing 할 수 있다

contain

resizeMode='contain'
contain으로 설정 시 전체 이미지 크기를 바깥 영역 크기에 fit하게 맞춘다

cover

resizeMode='cover'
cover로 설정 시 바깥 영역에 overflow: hidden을 준 것 처럼 동작하여
이미지의 기본 크기를 유지하고 바깥 영역의 배경으로 사용,
바깥 영역을 넘어가는 크기만큼 hidden 처리됨

import { Image } from 'react-native'


<Image
  style={ styles.image }
  source={require('./my-icon.png')}
  resizeMode='contain'
 /> 

Button

react native의 Button에는 style 속성이 없다
title, color, onPress 등이 있으니 공식 문서를 잘 보자

profile
떠돌이 생활을 하는. 실업자는 아니지만, 부랑 생활을 하는

0개의 댓글