[React Native] React Native Vector Icons

1. React Native Vector Icons

1) React Native Vector Icons 설치

깃 허브(github.com/oblador/react-native-vector-icons)의 메뉴얼에 따라 설치를 진행한다.

React Native Vector Icons

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

2) iOS 설정

• xcode로 프로젝트의 ios 폴더를 열고, Fonts라는 New Group을 추가 (1)
• xcode의 Fonts 그룹에 ttf 파일(프로젝트 - node_modules- react-native-vector-icons - Fonts 하위에 존재)을 이동 (2)
• xcode Info.plist에 Fonts provided by application의 item에 ttf 정보 추가 (3)
• xcode clean (Command + Shift + K) 및 빌드 (Command + B) (4)

 

(1)

(2)

(3)

(4)

3) Android 설정

• 'android/app/build.gradle' 수정 (1)
• 'android/settings.gradle' 수정 (2)
• 'android/app/build.gradle' 수정 (3)

 

(1)

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"

(2)

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

(3)

단, 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') // 추가
}

implementation project(':react-native-vector-icons')

 

 

 

2. React Native Vector Icons 사용법

1) Import

App.js 파일에 Ionicons를 import 해준다.

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

2) 아이콘 적용

Ionicons에서 사용 가능한 아이콘은 Bundled Icon Sets의 Browse all(oblador.github.io/react-native-vector-icons/)을 통해 확인할 수 있다. 

예를 들어 Ionicons 아이콘을 사용한다면, 다음과 같이 처리할 수 있다.

import 'react-native-gesture-handler';
import React, { Component } from 'react';
import { View, Text, StyleSheet, Image, Button, Linking } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import TabHomeScreen from './src/home_tab';
import TabUserScreen from './src/user_tab';
import TabMessageScreen from './src/message_tab';
import Icon from 'react-native-vector-icons/dist/Ionicons';
import Ionicons from 'react-native-vector-icons/dist/Ionicons';

const Tab = createBottomTabNavigator();

const TabBarIcon = (focused, name) => {
  let iconName, iconSize;

  if(name == 'Home') {
    iconName = 'home-outline'
  } else if (name == 'User') {
    iconName = 'people-outline'
  } else if (name == 'Message') {
    iconName = 'mail-outline'
  }

  iconSize = focused ? 30 : 20
  return (
    <Ionicons
      name={iconName}
      size={iconSize}
    />
  )
}

class App extends Component {
 
  render() {
    return (
      
      <NavigationContainer>
        <Tab.Navigator
          initialRouteName="Home"
          tabBarOptions={{
            activeBackgroundColor: 'skyblue',
            activeTintColor: 'blue',
            inactiveTintColor: '#fff',
            style: {
              backgroundColor: '#c6cbef'
            },
            labelPosition: 'beside-icon'
          }}
          screenOptions={({route}) => ({ //각 탭에 그림 삽입 및 선택 효과
            tabBarLabel: route.name,
            tabBarIcon: ({focused})=> (
              TabBarIcon(focused, route.name) // 함수 호출
            )
          })}
        >
          <Tab.Screen
            name="Home" component={TabHomeScreen}
          />
          <Tab.Screen
            name="User" component={TabUserScreen}
          />
          <Tab.Screen
            name="Message" component={TabMessageScreen}
          />
        </Tab.Navigator>
      </NavigationContainer>

...