[React Native] React Navigation - 14. React Native Vector Icons 설치

 

 

---

 

---

 

---

14. React Native Vector Icons 설치

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

GitHub - oblador/react-native-vector-icons: Customizable Icons for React Native with support for image source and full styling.

위의 깃헙 페이지에서 insatll 부분 참고.

npm install --save react-native-vector-icons

설치만 하면 되는 게 아니라 플랫폼별로 추가 설정을 해줘야 한다.

• ios

xcode를 열고 프로젝트를 열어준다. 프로젝트에서 ios폴더를 선택한 뒤에 open 하면 된다.

xcode로 해당 파일 여는 데만 시간이 몇 시간은 걸렸다.... 제발 xcode 좀 빨리빨리 됐으면...

 

이제 새로운 폴더를 만들건데 프로젝트 이름을 우클릭 한 뒤 new Group을 누르면 된다. 이 새 그룹의 이름은 Fonts라고 지어준다. 이 Fonts 폴더에 아까 npm install 로 설치했던 vector-icons를 넣어줄 건데 이건 프로젝트에서 node_modules 폴더에서 react-native-vector-icons라는 폴더를 찾으면 된다. react-native-vector-icons 폴더에 들어가서 Fonts라는 폴더에 들어가면 여러 ttf 파일이 존재한다. 우리가 만든 Fonts라는 폴더에 ttf 파일을 드래그 앤 드롭 해서 넣으면 된다. 여기서 우리가 쓸 거는 Ionicons.ttf 파일만 쓸 것이므로 그 파일만 드래그 앤 드롭! 뭔가 창이 뜰텐데 여기서 그냥 create folder references 유지하고 선택하는 건 그냥 프로젝트 이름만 있고 뒤에 아무것도 없는 걸 고르면 된다.

 

그리고 Info.plist 로 가서 Information Property List에 항목을 추가한다. Fonts provided by application이라는 항목으로 추가한 뒤에 바로 아래 보면 Item 0 이라는 곳이 있는데 그곳에 value 값을 추가한다. value 값에는 방금 추가한 ttf 파일 이름(Ionicons.tff)을 넣으면 된다. 

 

그 다음에 shift + cmd + k 를 눌러 clean을 해준다. 그 다음에 cmd + b 로 새로운 빌드를 실행한다. 여기서 빌드가 성공하면 ios 의 manual install은 끝났다!

아.... 빌드 시간 7878 실화인가... 암튼 빌드 성공!!

 

• android

이제 안드로이드의 추가설치를 진행하자!

xcode는 이제 그만하고 다시 vscode로 돌아가서 진행!

위에 있는 깃헙 페이지로 돌아가서 안드로이드 쪽을 보면 android/app/build.gradle 파일로 가서 아래 코드를 추가해주면 된다고 한다. 그냥 맨 아래에 추가하면 된다. 유의할 사항은 android/build.gradle 파일이 아니라는 것! 그리고 iconFontNames를 수정해야하는 것이다. 우리가 추가한 Ionicons.tff로 바꿔주면 된다.

project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy
]

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

아래 코드 추가하면 된다.

project.ext.vectoricons = [
    iconFontNames: [ 'Ionicons.ttf' ] // Name of the font files you want to copy
]

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

 

그리고 android/settings.gradle 파일로 가서 아래 코드를 추가해주자! + 있는 부분만 추가해주면 된다.

rootProject.name = 'MyApp'

include ':app'

+ include ':react-native-vector-icons'
+ project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

 

그리고 android/app/build.gradle 파일로 가서 아래 코드를 추가해주자. 이번에도 + 있는 부분만 추가하는데 이번에는 dependencies 안에 추가하면 된다! dependencies 가장 위에 넣고 compile 을 implementation으로 바꿔줬다. 내 프로젝트는 compile 이 아닌 implementation 으로 작성되어 있었다.

apply plugin: 'com.android.application'

android {
  ...
}

dependencies {
  compile fileTree(dir: 'libs', include: ['*.jar'])
  compile "com.android.support:appcompat-v7:23.0.1"
  compile "com.facebook.react:react-native:+"  // From node_modules
+ compile project(':react-native-vector-icons')
}

 위의 작업을 마치면 모든 설치는 끝났다.

 

 

그럼 이제 App.js 로 가서 방금 설치한 Ionicons.ttf를 import 해보자.

import Icon from 'react-native-vector-icons/dist/Ionicons'

이제 다시 아래 코드를 입력하여 실행해보자. 실행이 잘 됐다!! 그럼 이제 다음 강부터는 vector-icons를 활용해보도록 하자.

react-native run-ios

---

참고 자료

https://www.inflearn.com/course/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-%EA%B8%B0%EC%B4%88/dashboard

iOS/Android 앱 개발을 위한 실전 React Native - Basic - 인프런 | 강의