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

• 使用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文件裏的

 

到此結束！