react-native-vector-icons 설치 후 , 아이콘이 엑박으로 보이는 경우

관련글 

2023.02.16 - [개발로그/ReactNative] - react-native 에서 아이콘 표시하는 두가지 방법

 

 

필자의 개발환경을 참고하시고, 읽어주세요.

혹시 도움이 되었다면 간단한 덧글이라도 ...홍홍~ 궁금해요.

 

react-native-vetor-icons 설치 후 아이콘 표시 안됨 ㅠ

# 1. 개발환경 

react-native 버전은 0.69.1

react-native-vector-icons 버전은 9.2.0 

android 플랫폼으로 빌드 예정

react-native@0.69.1 
react-native-vector-icons@9.2.0

 

# 2. 설치 명령어

npm install npm i react-native-vector-icons

# 2-1. 참고.

 설치할 때 , react-native 서버와 android 에뮬레이터를 끄고 하는걸 추천. 

 만약 필자처럼 엑박이 뜨는 경우에도, 에뮬레이터와 서버를 모두 재기동 해보시길. 단순히 refresh가 안되었을 수 있으니까....

그래도 안된다면 개발중인 네이티브 플랫폼의 코드를 약간 수정해야합니다. 저의 경우는 ANDROID 로 빌드하고자 합니다.

그러니, IOS 플랫폼도 대응해야한다면 아래 사이트를 참고해서 해결하면 됩니다.(저도 나중엔 ios도 대응해야합니다....ㅠㅠ)

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

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

 

그럼 저와 같은 처지? 이신 분들은 계속 내려가주세요. 

 

# 3. 설치 확인 

npm list react-native-vetor-icons 입력 후 설치 확인.

# 4. 코드 적용 예시 

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

위 처럼 import 후 ,아래 코드처럼 입력했다.

<Icon name="ios-person" size={30} color="#4F8EF7" />

그런데 엑박이 두둥.

 

# 5. 해결 과정.

(참고) 저의 경우, 안드로이드 네이티브 코드를 수정한 경우에는 에뮬레이터를 재기동(껐다가 켬)을 해야 코드가 적용되었습니다. 

STEP 1.  (프로젝트 폴더)/android/app/ 로 이동합니다.

build.gradle 파일을 열어 아래와 같이 수정합니다. 

apply plugin: "com.android.application"

import com.android.build.OutputFile
import org.apache.tools.ant.taskdefs.condition.Os

/**
 주석 생략
 */

project.ext.react = [
    enableHermes: false,  // clean and rebuild if changing
]

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

 

위 코드블럭을 참고하여 아래 코드를 삽입합니다. 

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

 

그리고 나서 에뮬레이터 재기동 ! 

 

성공! 

 

그래도 안되신다면 아래 링크에서 optinal steps 를 추가로 수정해보세요.

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