首页 > 其他分享> > ReactNative中使用iconfont

ReactNative中使用iconfont

2020-02-19 20:37:32 作者：互联网

配置
ReactNative中要使用iconfont，需要集成react-native-vector-icons库。
集成方式：
1.打开命令行窗口，并定位到项目的根目录下
2.下列两种导入方式分别是下载库和关联库，选其中一个执行即可
```
npm install --save react-native-vector-icons
react-native link react-native-vector-icons
```
在导入成功之后，根目录/android/app/src/main/asserts/fonts文件夹下会出现默认引入的ttf格式的字体文件。如果没有该文件夹，可以手动创建一个（当然如果没有文件夹的话也不会有默认的ttf格式字体文件，此刻不要慌，接着往下看）。
使用预置的icon
在配置的时候，我们集成该库会帮我们默认引入ttf格式的字体文件，但是如果没有默认引入ttf格式的字体文件，我们需要在gradle中进行一些配置，此处的gradle是指根目录/android/app/build.gradle文件，在该文件的最后引入下面的代码：
```
project.ext.vectoricons = [
        iconFontNames: [ 'FontAwesome.ttf', 'MaterialIcons.ttf' ], //这里写需要引入的字体文件
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
```
如果不知道有哪些可以使用的iconfont的字体文件可以参看默认导入的字体文件，默认导入的字体文件有：Entypo.ttf，EvilIcons.ttf，Feather.ttf，FontAwesome.ttf，Foundation.ttf，iconfont.ttf，Ionicons.ttf，MaterialCommunityIcons.ttf，MaterialIcons.ttf，Octicons.ttf，SimpleLineIcons.ttf，Zocial.ttf；

在引入字体文件成功之后我们可以在ReactNative中使用预置的icon，使用方式：
```
import FontAwesome from 'react-native-vector-icons/FontAwesome';

const Icon = (props) => {
  return <FontAwesome name={'angle-double-up'} size={50} />
};
```
代码中FontAwesome中的name属性就是预置icon的名字。这里我们使用的是FontAwesome下的预置icon，我们可以到FontAwesome的官网上找到其预置icon的种类，其他的字体文件中预置的icon也可以用此方法找到。
使用网上下载的iconfont
需要使用网络上下载的iconfont的话，我们首先选择好需要的图标，然后解压会得到下列文件（这里我使用的是阿里旗下的iconfont）

我们把iconfont.ttf文件复制到根目录/android/app/src/main/asserts/fonts下，然后再在资源文件中创建一个iconfont.json文件（这里的iconfont.json不要使用上图中的iconfont.json，一定要自己创建一个），然后在iconfont.json中写好你需要的图标名字和图标对应的Unicode编码，我的文件内容如下：
```
{
  "tianqi1": 59149, // "tianqi1"是我自己写的图标名字，而59149是上面图片中iconfont.json文件对应的unicode_decimal编码
  "tianqi2": 58901
}
```
再新建一个js文件CXIcon.js，其代码如下：
```
import createIconSet from 'react-native-vector-icons/lib/create-icon-set';
import glyphMap from '../../res/iconfont/iconfont.json';

const iconSet = createIconSet(glyphMap, 'CXIcon', 'iconfont.ttf');

export default iconSet;
```
在需要使用到iconfont的地方引入CXIcon.js文件，使用方式如下：
```
import CXIcon from '../../../utils/CXIcon';

const Icon = (props) => {
  return <CXIcon name={'tianqi1'} size={50} />
};
```
代码中的name属性就是我在iconfont.json中定义的图标名字

Royalluo 发布了1 篇原创文章 · 获赞 0 · 访问量 14 私信关注

标签：文件,..,iconfont,json,字体,使用,ttf,ReactNative
来源： https://blog.csdn.net/Royalluo/article/details/104398810