[RN] React Native cli Android에서 react-native-vector-icons 라이브러리 사용하기

개요

---

앱 개발을 할 때는 여러 아이콘을 사용하는 경우가 많다.

React Native에는 아이콘들을 간편하게 가져와서 사용할 수 있도록 지원하는 react-native-vector-icons 라이브러리가 있다.

 

사용할 수 있는 아이콘들은 다음 링크에서 볼 수 있다.

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

react-native-vector-icons directory

 

Expo에서는 자동으로 라이브러리를 사용할 수 있도록 설정해 주지만 React Native cli에서는 라이브러리를 사용하려면 수동으로 설정해주어야 한다.

---

사용 방법

---

인터넷에 검색하면 여러 방법들이 나와 있으나 해당 방법이 가장 간편하다.

 

android/build.gradle 파일에 해당 라인을 추가한다.

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

 

그 후 원하는 아이콘을 import하여 사용한다.

import Ionicons from 'react-native-vector-icons/Ionicons'
import Entypo from 'react-native-vector-icons/Entypo'
import MaterialIcons from 'react-native-vector-icons/MaterialIcons'

//아래와 같은 방식으로 사용
<Entypo name='home' size={20} color={color}/>
<Ionicons name='person' size={20} color={color}/>
<MaterialIcons name='settings' size={20} color={color}/>

아이콘의 이름은 name에, 아이콘의 크기는 size, 아이콘의 색깔은 color에 준다.

 

아이콘은 화살표 함수로 작성할 수도 있다.

({color}) => (<Ionicons name='person' size={20} color={color}/>)

매개변수는 name, size, color 모두 가능하다.

 

아이콘을 사용하는 라이브러리에 따라 무궁무진하게 활용이 가능하다.