[React Native] react-native-vector-icons 사용법 및 문제해결

React Native react-native-vector-icons 사용법 및 문제해결

 

React Native 개발을 하다보면 아이콘을 사용해야 할 일이 당연히 생기게 되는데요, 이번에 icon 사용방법에 대해 설명드리겠습니다,

 

icon을 사용하려고 구글 검색을 하면 react-native-vector-icons가 가장 먼저 나타나게 되는데요,

npm에서 react-native-vector-icons를 확인해 보면 주에 20만명이 넘을 정도로 많이 사용을 하고 있습니다.

자 이제 npm에 나와 있는 설명대로 설치를 진행해 볼 텐데요, 이 방법만으로 icon 사용이 가능해지는 것은 아닙니다.

실제로 사용할려고 하면 문제가 생기더라고요.

우선 npm 명령어를 사용하여 설치를 진행해 줍니다.

npm install --save react-native-vector-icons
cd ios && pod install && cd ..

설치가 완료 되었으면 npm에서 나와 있는 예시를 가지고 icon을 생성해보겠습니다.

import Icon from 'react-native-vector-icons/FontAwesome';
const myIcon = <Icon name="rocket" size={30} color="#900" />;

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

const App = () => {
  return (
    <View style={styles.container}>
      <Text>
        <Icon name="rocket" size={30} color="#900" />;
      </Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  }
})

export default App;

이렇게만 하면 icon이 잘 나타날 것이라고 생각하는데요 실제 실행해보면 에러 메시지가 출력 됩니다,

node_modules/react-native-vector-icons/FontAwesome.js: Cannot find module ... 이러구요

사용하실려는 것에 따라서 Unrecognized font family 'Ionicons' 이런 에러가 나오실 수도 있구요.

 

구글링을 해도 react-native link react-native-vector-icons 이렇게 하라는 설명이 대부분인데요,

React Native 0.6 이상부터는 auto link를 사용해서 이렇게 하셔도 unlink 하라는 메시지를 받게됩니다.

 

자 이제 해결 방법은 아래 코드들을 추가해주시면 해결 됩니다~

 

우선 Podfile 을 여시고 아래 코드를 추가해주세요

Podfile위치는 ios > Podfile 입니다.

  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

 

다음으로 info.plist을 여시고 아래 코드를 추가해주세요

info.plist위치느 ios > 프로젝트명 > info.plist 입니다.

<key>UIAppFonts</key>
	<array>
		<string>AntDesign.ttf</string>
		<string>Entypo.ttf</string>
		<string>EvilIcons.ttf</string>
		<string>Feather.ttf</string>
		<string>FontAwesome.ttf</string>
		<string>FontAwesome5_Brands.ttf</string>
		<string>FontAwesome5_Regular.ttf</string>
		<string>FontAwesome5_Solid.ttf</string>
		<string>Foundation.ttf</string>
		<string>Ionicons.ttf</string>
		<string>MaterialIcons.ttf</string>
		<string>MaterialCommunityIcons.ttf</string>
		<string>SimpleLineIcons.ttf</string>
		<string>Octicons.ttf</string>
		<string>Zocial.ttf</string>
	</array>

 

이제 npm을 새로 시작해주시고 react-native run-ios를 하면 정상적으로 화면에 출력되는 것을 보실 수 있습니다.

 

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

react-native-vector-icons directory

이 곳에서 사용하실 icon을 보시고 사용하시면 됩니다.

거의 왠만한 아이콘은 다 있는거 같아요.

 

예시로 위의 아이콘을 사용하시려면 import를 위의 FontAwesome 에서 AntDesign으로 바꾸시고,

아이콘 name을 roket에서 stepforward로 변경하시면 되요.

import Icon from 'react-native-vector-icons/AntDesign';
<Icon name="stepforward" size={30} color="#900" />;