1.安裝三方包

yarn add react-native-vector-icons或

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

2.自動(dòng)link

react-native link react-native-vector-icons
ios配置（ios需要單獨(dú)導(dǎo)入字體文件，安卓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 (
     <FontAwesome
            name="angle-left"
            size={26}
            style={{ color: 'white' }}
          />
    );
  }
}

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

1.將自定義icon的svg文件上傳至http://fontello.com/（或其他網(wǎng)站，這里提供我自己使用的），并選中，點(diǎn)擊右上角，download webfont

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

QQ20180205-140436@2x.png

QQ20180205-141254@2x.png

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

QQ20180205-141600@2x.png

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中 需要在項(xiàng)目Xcode文件中 Add file to xiangmu, 并在info.plist中的
// fonts provided by application加入改字體文件
// android 需要在 android/app/src/main/assets/fonts文件夾下添加該ttf文件
const CLIcon = createIconSetFromFontello(clIconConfig);

// 導(dǎo)入stack導(dǎo)航組件
export default class HomeScreen extends React.Component {
  render() {
    // 這里可以是導(dǎo)入的其他組件
    const { navigate } = this.props.navigation;
    return (
      <View style={{ backgroundColor: '#fff', flex: 1 }}>
        <Text>Hello, Chat App!</Text>
        <CLIcon
          name="seer-contacts"
          size={26}
          style={{ color: 'red' }}
        />
        <Button
          onPress={() => navigate('Chat')}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}

QQ20180205-141940@2x.png