react-native Unrecognized font family ‘Lonicons’解决方法

ICONS是可以直接使用图片名, 就能加载图片的三方,使用很方便, 你不需要在工程文件夹里塞各种图片, 节省很多空间,下面就来看看怎么使用吧!

1. 首先打开terminal进入到我们的工程文件夹下, (不会创建工程的请参考:http://blog.csdn.net/margaret_mo/article/details/51304062)

输入: npm install react-native-vector-icons --save (回车)

输入: npm install rnpm -g

输入: rnpm link (回车)

2. 在Finder中用Xcode打开工程: .../Demo/ios/Demo.xcodeproj

(1).右键工程文件Add Files to "(你工程名)"

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

(3).点击"完成".

react-native Unrecognized font family ‘Lonicons’解决方法_第1张图片
image
react-native Unrecognized font family ‘Lonicons’解决方法_第2张图片
image

3. 在xcode的Info.plist文件中,加入: Fonts provided by application数组,并加入以下9项:

react-native Unrecognized font family ‘Lonicons’解决方法_第3张图片
image

到此环境就算设置好了, 接下来就是使用ICONS了.

用source code打开info.plist文件


react-native Unrecognized font family ‘Lonicons’解决方法_第4张图片
image.png

将以下代码拷贝进去:

UIAppFonts
  
    Entypo.ttf
    EvilIcons.ttf
    FontAwesome.ttf
    Foundation.ttf
    Ionicons.ttf
    MaterialIcons.ttf
    Octicons.ttf
    SimpleLineIcons.ttf
    Zocial.ttf
    MaterialCommunityIcons.ttf
  

免去了一项一项的添加。

文章来源:http://www.cnblogs.com/moxiaoyan33/p/5482024.html

你可能感兴趣的:(react-native Unrecognized font family ‘Lonicons’解决方法)