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

• 使用npm提供的圖標

import React, { Component } from 'react';
import {
StyleSheet,
Text,
Image,
View
} from 'react-native';

import Icon from 'react-native-vector-icons/Ionicons'; //引入圖標

export default class HelloText extends Component{
render() {
return (
<View>
<Icon name='md-home' size={30} color='blue'/> //使用，這里的md-home是node_modules/react-native-vector-icons/glyphmaps/Ionicons.json文件里的鍵名，也可以使用其他json文件，但是要引入相應的js文件
</View>

);
}
}
})

 

• 使用自定義圖標

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文件里的

 

到此結束！