더북(TheBook)

이제 Image 컴포넌트를 사용해봅시다. Empty 컴포넌트를 다음과 같이 수정해보세요.

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

(...)

Image 컴포넌트에서 사용할 경로를 지정할 때는 source라는 Props로 지정합니다. 그리고 경로를 입력할 때는 require()라는 함수로 입력해야 합니다. 이 코드에서 사용한 경로에서 ../는 상위 디렉터리를 의미합니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.