3.1.5.3 young_and_happy.png 보여주기

이제 Image 컴포넌트에 대한 기본 사용법을 모두 배웠습니다. 그럼 Empty 컴포넌트에서 보여줄 이미지를 제대로 설정해봅시다. young_and_happy.png 파일을 불러오고, 이미지 크기는 width 240, height 179로 설정하세요. 이미지의 하단 여백은 16으로 설정하세요.

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/young_and_happy.png')}
        style={styles.image}
      />
      <Text style={styles.description}>야호! 할일이 없습니다.</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  block: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  image: {
    width: 240,
    height: 179,
    marginBottom: 16,
  },
  description: {
    fontSize: 24,
    color: '#9e9e9e',
  },
});

export default Empty;

▲ 그림 3-28 young_and_happy.png 이미지