react-native-vector-icons的使用

1.安装三方包

yarn add react-native-vector-icons或

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

2.自动link

react-native link react-native-vector-icons
ios配置（ios需要单独导入字体文件，安卓link完就可以用了）
1.右键工程文件Add Files to "(你工程名)"

屏幕快照 2018-02-05 13.49.50.png

2.选择node_modules/react-native-vector-icons/Fonts文件夹

屏幕快照 2018-02-05 13.56.41.png

3.检查info.plist文件Fonts provided by application是否成功加入了字体文件

屏幕快照 2018-02-05 13.53.53.png

3.直接使用

import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  Platform,
  StatusBar,
} from 'react-native';
import FontAwesome from 'react-native-vector-icons/FontAwesome';

export default class CustomHeader extends React.Component {
  render() {
    return (
     
    );
  }
}

4.自定义icon（ios）(android 直接在 android/app/src/main/assets/fonts文件夹下添加该ttf文件)

1.将自定义icon的svg文件上传至http://fontello.com/（或其他网站，这里提供我自己使用的），并选中，点击右上角，download webfont

屏幕快照 2018-02-05 14.01.57.png

2.下载后得到如下

[email protected]

3.将config.json加入到项目文件中，如下代码中的customIcon.json
4.将font文件夹下ttf文件（此处fontello.ttf）, 也通过和上面一样的Add Files to "(你工程名)"加入到你的项目中（或者直接拖拽到刚才react-native-vector-icons中的那些字体文件的同一目录下）

[email protected]

5.info.plist文件Fonts provided by application加入了字体文件名

[email protected]

6.依该包的自定义icon引入方法，代码如下

import React from 'react';
import {
  Text,
  View,
  Button,
  StatusBar,
} from 'react-native';
import { createIconSetFromFontello } from 'react-native-vector-icons';

import clIconConfig from '../config/customIcon.json';
// 自定义icon http://fontello.com/ download webfont config.json 与 ttf文件
// ios中 需要在项目Xcode文件中 Add file to xiangmu, 并在info.plist中的
// fonts provided by application加入改字体文件
// android 需要在 android/app/src/main/assets/fonts文件夹下添加该ttf文件
const CLIcon = createIconSetFromFontello(clIconConfig);

// 导入stack导航组件
export default class HomeScreen extends React.Component {
  render() {
    // 这里可以是导入的其他组件
    const { navigate } = this.props.navigation;
    return (
      
        Hello, Chat App!
        
         navigate('Chat')}
          title="Chat with Lucy"
        />
      
    );
  }
}

[email protected]