[React-Native] Vector Icons 활용

설치 과정이 꽤나 복잡하고 ,,, 중간에 에러도 나서 따로 정리를 안 했었다 !!!

 

바로 활용으로 넘어가기 힛

 

 

---

https://oblador.github.io/react-native-vector-icons/  사이트를 참조해보면 Ionicons에서 지원하는 다양한 아이콘들을 확인해볼 수 있다.

 

home 아이콘

 

* 참고로 우리는 다양한 아이콘들 중 Ionicons 를 사용할 것 !!

 

 

 

- 지금까지는 TabBarIcon이라는 함수에서 우리가 다운로드 받은 그림의 경로를 할당해 출력했다.

- 이번에는 내장된, 아니 지원하는 아이콘 자체를 불러와보자 !!

 

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

  - 모듈부터 불러오기

 

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

  if (name==='Home') {
    iconName = 'home-outline'
    // iconImagePath = require('./src/assets/pics/home_icon.png')
  } else if (name==='User') {
    iconName = 'people-outline'
    // iconImagePath = require('./src/assets/pics/user.png')
  } else if (name==='Message') {
    iconName = 'mail-outline'
    // iconImagePath = require('./src/assets/pics/message.png')
  }

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

  - 주석처리 : 원래 우리가 하던 방법

  - but, 이제는 iconName이라는 새로운 변수를 할당해 지원하는 icon을 변수에 할당하자 !!

 

 

   - 디자인이 좀 더 통일감이 있어진 것을 확인할 수 있다.