[리엑트 네이티브] React-Native-vector-icon

https://www.npmjs.com/package/react-native-vector-icons

react-native-vector-icons

react native vector icon 페키지는 정말 많이 사용하는 유용한 아이콘이다.

위의 페키지를 사용하면 쉽게 여러 가지 아이콘들을 사용할 수 있다.

 

간단한 사용방법

1. 설치하기

npm install react-native-vector-icons

 설치가 잘 되었는지 확인하기

 npm ls --depth=0

위 그림과 같이 설치가 제대로 이루어졌음을 알 수 있다.

 

2. 사용해보기 

import Icon from 'react-native-vector-icons/Ionicons';
 
function ExampleView(props) {
  return <Icon name="ios-person" size={30} color="#4F8EF7" />;
}

위의 코드는 공식사이트에서 제공하는 코드이다.

 

필자는 직접 넣어서 사용해보았다.

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
 
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Icon name="ios-body" size={30} color="#4F8EF7" />
        <Icon name="ios-person" size={30} color="#4F8EF7" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

 

이렇게 위와같이 간단하게 삽입할 수 있다. 

간단하게 삽입하게 되면 어떤 이미지를 삽입할지 골라야 하는데.

어떠한 이미지가 있는지 확인하기 위해서 아래와 같은 유용한 사이트를 제공한다.

 

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

react-native-vector-icons directory

정말 저거 하나면 충분하다.