react-native ios中使用react-native-vector-icons图标

在react-native开发时，使用react-native-vector-icons库中的图标时可能会报
unrecognized font family 'FontAwesome'('Ionicons')，这是因为没有在xcode中配置图标
具体做法：
step1 下载react-native-vector-icons插件

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

step2 先不着急运行
在xcode中打开rn项目下的ios文件
目录如下：

然后找到rn项目文件中的node_modules/react-native-vector-icons/Fonts文件，复制到桌面
step3 重要的一点来了~
把Fonts文件夹拖拽到xcode如下位置，记住，一定是要拖拽！

Fonts进来后会出现如下弹框：

选择Create Groups，Add to target选择第一个
找到项目下的info.plist，添加Fonts provided by application，类型选择Array

step4 回到终端：

sudo npm install rnpm -g
rnpm link

生成如下：

到这里，就配置成功，可以在webstorm中引用图标库了
示例

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome'

export default class Home extends Component {
    render() {
        return (
            
                首页
            
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

step5

react-native run-ios

运行结果

注意点：
1、icon与react-navigation一起使用时，icon需要设置width和height，不然不显示，
fontSize设置了没用。
2、FontAwesome的图标name与其官网（http://www.bootcss.com/p/font-awesome/）上一致，只需要找到你要的图标，然后去掉前缀icon-就行了。
3、react-native-vector-icons还可以使用自定义图标，方法中有，自行搜索。