[React Native] Icon 사용하기

1. 프로젝트 폴더에서 아이콘 라이브러리를 설치합니다.

$ npm install --save react-natiave-vector-icons

2. 플랫폼에 맞는 설정합니다.

Android:

<프로젝트>/android/app/build.gradle 파일 아래에 다음 코드를 추가합니다.

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Ios(Mac 기준):

Xcode project를 실행합니다.

(실행 파일 위치: <프로젝트>/ios/<프로젝트명>.xcworkspace)

Xcode에서 프로젝트 폴더를 우측 클릭한 후 New Group을 클릭한다.

새로운 그룹의 이름은 Fonts로 정한다.

Fonts 파일을 가져온다. Font는 <프로젝트>/node_modules/react-native-vector-icons/Fonts에 있다. 파일들을 선택한 후 Fonts 그룹 아래로 드래그한다.

드래그한 후 보이는 팝업창에서 Added folders 항목에서 Create groups을 Add to targets 항목에서 자신의 프로젝트를 선택한 후 피니쉬 버튼을 클릭한다.

이상이 없다면 아래 사진과 같이 폰트 파일이 Fonts 그룹 안에 들어있다. 이제 아래에 있는 Info.plist 파일을 클릭한다.

Xcode 메인 창에 테이블이 보일 것이다. 첫 번째 줄에 있는 Information Property List에 커서를 올리면 우측에 플러스 버튼이 생긴다. 그 버튼을 누른 후 Fonts provided by application을 입력한다. 새로 생긴 Fonts provided by application 좌측에 우측으로 향한 화살표가 보이는데 화살표를 클릭하면 내부에 있던 Item 0이 나타난다. 그 항목의 값을 자신이 원하는 폰트 파일명(이전에 드래그 했던 파일들)을 확장자까지 입력한다. 같은 방식으로 플러스 버튼을 눌러 여러개의 폰트들을 추가할 수 있다.

그 다음 아래 세 단계를 차례로 실행을 한다.

Shift + Command + K : 마지막 빌드 지우기

Command + B : 새로운 빌드 실행

Command + R : 앱 실행

3. <프로젝트>/App.js 파일에 아래 코드를 추가합니다.

import React, {Component} from 'react'; import {View} from 'react-native'; import Icon from 'react-native-vector-icons/FontAwesome'; export default class App extends Component { render() { return ( ); }; }

Icon 컴포넌트의 속성은 3가지가 있습니다.

name: 아이콘의 이름

size:아이콘의 크기

color:아이콘의 색

아이콘의 이름은 아래 링크에서 확인할 수 있습니다.

4. 리액트 네이티브 앱을 실행하여 결과를 확인합니다.

깃허브에 등록된 라이브러리에서 더 많은 정보를 얻을 수 있습니다.

https://github.com/oblador/react-native-vector-icons

from http://turingcode.tistory.com/18 by ccl(A) rewrite - 2020-03-14 00:20:15