[React Native] react-native-vector-icons 아이콘 깨짐 현상 해결방법 (엑박)

 

react-native-voctor-icons를 설치했는데,

아이콘이 깨지는 현상이 발생했습니다.

해결 방법 알아봅시다. 😀

---

📝 해결 방법

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.

✔ 해당 깃허브에 해결 방법이 나와있습니다. 저는 안드로이드 기준으로만 보겠습니다. 

 

⦁ 터미널에 입력

npm install react-native-vector-icons --save
or
yarn add react-native-vector-icons --save

 

✔ 패키지를 설치해 줍니다.

 

⦁ android/app/build.gradle 파일에 추가

// 찾기 기능을 이용하세요
apply from: "../../node_modules/react-native/react.gradle"

// 바로 아래 줄에 추가해 주세요
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

 

✔ 찾기 기능을 이용해서 바로 아랫줄에 코드를 추가해 줍니다. ( 인텔리제이 command + shift + F )

 

✔ 이후 Gradle를 다시 빌드해주고 실행시키면 됩니다.

 

⦁ 아이콘 사용 예시

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

react-native-vector-icons directory

//아이콘 사용 예시

import React from 'react';
import {View, TextInput, StyleSheet} from 'react-native';
import Icon from 'react-native-vector-icons/AntDesign'; // 이 친구요

const SearchBar = ({placeholderText}) => {
  return (
    <View style={styles.searchContainer}>
      <Icon name="search1" size={20} color="#555" style={styles.searchIcon} /> // 이 친구랑
      <TextInput
        style={styles.input}
        placeholder={placeholderText}
        placeholderTextColor="#555"
      />
    </View>
  );
};

 

 

 

✔ 해결 완료~ 🥳

    한번 세팅해 두면, 다양한 아이콘을 편리하게 사용할 수 있기 때문에 추천드립니다 !

 

 

+ 여러분 저 취업했어요 항상 감사드립니다. 열심히 포스팅할게요☺️

 

---

참고 문헌 :