4.5.1 벡터 아이콘 사용하기

이번에 보여줄 삭제 아이콘은 Image 컴포넌트를 사용하지 않습니다. react-native-vector-icons라는 라이브러리로 벡터 아이콘을 사용해보겠습니다.

벡터 아이콘은 폰트 또는 SVG를 사용해 크기가 조정돼도 아이콘이 흐려지거나 깨지지 않습니다. 모든 해상도에서 또렷하게 나타나며 색상도 쉽게 변경할 수 있습니다. react-native-vector-icons 라이브러리는 오픈 소스로 공개된 벡터 아이콘을 리액트 네이티브 프로젝트에서 간편하게 컴포넌트처럼 사용할 수 있게 해줍니다.

이 라이브러리를 설치해봅시다. 다음 명령어를 입력하세요.

$ yarn add react-native-vector-icons

그리고 iOS와 안드로이드 프로젝트 둘 다 추가해줘야 하는 사항이 있습니다.

4.5.1.1 iOS에 react-native-vector-icons 적용하기

ios 디렉터리로 이동해 pod install 명령어를 입력하세요.

$ cd ios
$ pod install

그다음에는 ios/TodoApp/Info.plist 파일을 열고 스크롤을 아래로 쭉 내려서 맨 마지막의
</dict>를 찾은 뒤, 다음과 같이 UIAppFonts 속성을 추가해보세요.