리액트네이티브 아이콘 사용하기, react-native-vector-icons 사용하기

1. 아래 명령어로 react-natvie-vector-icons을 설치한다.

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

2. link 명령어로 라이브러리와 프로젝트를 연결한다. 

react-native link react-native-vector-icons

3. import 구문을 아래와 같이 추가한다.

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

https://ionicons.com/  접속하여, Icon 탭에서 사용할 수 있는 아이콘 종류를 확인 할 수 있다. 

아이콘을 클릭하면 다음과 같이 하단부에 확장영역이 뜨며, Style 종류에 따른  svg파일을 다운로드 받을 수 있으면 Web Component Code를 표시한다. 

실제로 RN에서사용할때 플랫폼 접두어(ios 또는 md) + "-"+ name 명을 써서 표시한다. 

메뉴 아이콘을 클릭에서 선택하면 위와 같이 Web Component Code가 표시되는데 RN에서 사용할경우 아래과 같이 코드를 불러서 사용한다. 

<Icon name="ios-menu"  size={30} color="white"/>

아래코드에서 Ionicons 아이콘을 사용한 디자인을 살펴보자 

 
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image, TouchableOpacity} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
 
 
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <View style={{paddingLeft:10, flex:2}}>
            <Icon name="ios-menu"  size={30} color="white"/>
          </View>
          <View style={{flex:2,justifyContent:'flex-end', flexDirection: 'row'}}>
           <Icon name="ios-notifications-outline" size={30} color="white" />
           <Icon name="ios-search" size={30} color="white" style={{paddingRight:20, paddingLeft:20}} />
          </View>
        </View>
        
      </View>
      
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1
  },header: {
        backgroundColor: '#808080',
        alignItems: 'center',
        justifyContent:'flex-start',
        height:60,
        flexDirection: 'row',
        paddingTop: 20,
    }
});
 

[App.js]

좀더 자세한 내용은 react-native-vector-icons   참조하자