react-native 아이콘 삽입하기

vscode에서 react-native로 동기들과 어플을 만들고 있는 중이다.

그러던 중 화면에 뒤로가기 화살표를 삽입할 일이 생겨서 약 1시간 반의 노력 끝에 성공했다 히히

 

찾아보니 react-native 내부에 icon을 사용할 수 있는 library가 있다고 한다.

설치를 시작해보자.

 

1. react-native-vector-icons를 설치해준다.

> npm install react-native-vector-icons

 

 

2. android>app>build.gradle 가장 하단에 다음 코드를 넣어준다.

 

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

 

 

3. icon이 필요한 파일에 import 해주고 필요한 아이콘을 삽입해준다.

import Icon from 'react-native-vector-icons/AntDesign';

<Icon name="left" size={36} color={'#000000'} />

 

 

아래의 url에서 아이콘 명들을 확인할 수 있다.

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

react-native-vector-icons directory

 

 

그러면 삽입 끝!

 

이제 위치를 조정해준다...ㅎ..