• 使用npm提供的圖標

 1 import React, { Component } from ‘react‘;
 2 import {
 3 StyleSheet,
 4 Text,
 5 Image,
 6 View
 7 } from ‘react-native‘;
 8 
 9 import Icon from ‘react-native-vector-icons/Ionicons‘; //引入圖標
10 
11 export default class HelloText extends Component{
12 render() {
13 return (
14 <View>
 

15 <Icon name=‘md-home‘ size={30} color=‘blue‘/> //使用，這裏的md-home是node_modules/react-native-vector-icons/glyphmaps/Ionicons.json文件裏的鍵名，也可以使用其他json文件，但是要引入相應的js文件
16 </View>
17 
18 );
19 }
20 }
21 })

• 使用自定義圖標

1.去字體圖標網站下載圖標，比如iconFont等，自行查找。
2.去 https://icomoon.io 上把下載的圖標導入進去，然後點擊編輯，選擇你導入的圖標，會出來一個對話框，然後根據下圖操作，操作完之後再點擊select，也就是刪除左邊的圖標，然後選擇你的圖標，之後進入第3步。

3.點擊Generate Font,點擊Download下載，之後解壓，解壓後如下。

4.在項目任意位置新建文件夾，文件夾結構如下，字體文件下的字體是解壓出來的fonts文件下的，把selection文件拿過來，新建iconmoon.js文件，這個js文件名是和字體文件名一致的。

5.iconmoon.js文件代碼如下

import {createIconSetFromIcoMoon} from ‘react-native-vector-icons‘;
import icoMoonConfig from ‘./selection.json‘;

const Icon = createIconSetFromIcoMoon(icoMoonConfig);

export 
 
default Icon;

export const Button = Icon.Button;
export const TabBarItem = Icon.TabBarItem;
export const TabBarItemIOS = Icon.TabBarItemIOS;
export const ToolbarAndroid = Icon.ToolbarAndroid;
export const getImageSource = Icon.getImageSource;

6.找到android文件夾，如下圖位置把字體文件放入，如果沒有fonts文件夾就自己建，assets文件夾也一樣，其他的字體文件是打包後生成的。

7.使用

import React, { Component } from ‘react‘;
import {
  StyleSheet,
  Text,
  Image,
  View
} from ‘react-native‘;
import Icon from ‘../assets/icomoon‘;
export default class HelloText extends Component{
  render() {
    return (
      <View>
        <Icon
          name="mussic" 
          size={30}
          color=“red”
        ></Icon>
      </View>
        
    );
  }
}

這裏的name是指selection.json文件裏的

到此結束！

react-native-vector-icons的使用方法