react-native-icons 字体图标插件

下载

在项目的根目录下执行npm install react-native-icons@latest --save,下载完成后可以在node_modules目录下看到该插件:

这里写图片描述

配置

目前只支持iOS,所以只有xcode的配置:

导入ReactNativeIcons.xcodeproj

1.项目Libraries上右键:

这里写图片描述

添加项目根目录下的node_modules/react-native-icons/ios/ReactNativeIcons.xcodeproj
2.引用libReactNativeIcons.a:
单机项目,在右面的面板中选择Build Phases下的Link Binary With Libraries,点击+号添加库:
这里写图片描述
这里写图片描述

3.添加ttf文件:
这个地方要注意,github上直说了引用node_modules/react-native-icons/ios/ReactNativeIcons/Libraries/FontAwesomeKit文件夹,但是主要的还是4个ttf文件:

单机项目,在右面的面板中选择Build PhasesCopy Bundle Resources选择+号,在出现的文件选择器中点击Add Other...,定位到node_modules/react-native-icons/ios/ReactNativeIcons/Libraries/FontAwesomeKit目录下,把所有的ttf文件和otf都勾选上:

这里写图片描述
这里写图片描述
这里写图片描述

Import

要想使用react-native-icons,需要在代码中添加如下语句:

 var {
   Icon,
 } = require('react-native-icons');
  • 1
  • 2
  • 3

选择图标

类别 图标数量 引用名
FontAwesome 4.4 585 fontawesome
ionicons 2.0.0 733 ion
Foundation icons 283 foundation
Zocial 99 zocial
Material design icons 744 material

实例

我们在FontAwesome4.4网站上找了一个apple图标:

这里写图片描述

怎么用呢?看下面代码:

 'use strict';

 var React = require('react-native');
 var {
   Icon,
 } = require('react-native-icons');
 var {
   AppRegistry,
   StyleSheet,
   View,
 } = React;

 var TesterHome = React.createClass({
   render() {
     return ( < Icon name = 'fontawesome|apple'
       size = {
         150
       }
       style = {
         styles.beer
       }
       />


     );
   }
 });

 var styles = StyleSheet.create({
   container: {
     flex: 1,
   },
   beer: {
     width: 150,
     height: 150,
   }
 });
 AppRegistry.registerComponent('TesterHome', () => TesterHome);

核心代码是fontawesome|apple就是这么简单.所以的引用都是库名的引用名|图标的名称

react native TypeError network request failed

react native TypeError network request failed

异常出现的原因:由IOS9引入的新特性造成的。iOS9引入了App Transport Security (ATS)。这个新特性要求App内部访问网络必须使用Https协议。而我的项目使用的是Htttp协议。所以就报以上错误了。

解决方法是在项目中的info.plist文件中添加,App Transport Security Settings,然后再下面添加Allow Arbitrary Loads并把其boolean值设置为YES