3.1.5.1 resizeMode 이해하기

Image 컴포넌트는 따로 설정하지 않으면 실제 이미지 크기를 기반으로 dp 단위의 크기로 변환되어 나타납니다. 예를 들어, 우리 프로젝트에 사용하는 circle 이미지는 별도로 설정하지 않으면 200dp × 200dp의 사이즈로 보입니다.

스타일로 Image 컴포넌트의 크기를 300dp × 200dp로 설정해보세요.

components/Empty.js

import React from 'react';
import {View, Text, Image, StyleSheet} from 'react-native';

function Empty() {
  return (
    <View style={styles.block}>
      <Image
        source={require('../assets/images/circle.png')}
        style={styles.image}
      />
      <Text style={styles.description}>야호! 할일이 없습니다.</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  block: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  image: {
    width: 300,
    height: 200,
  },
  description: {
    fontSize: 24,
    color: '#9e9e9e',
  },
});
                        
export default Empty;