不知道何时开始, iconfont 成为了 App 开发的利器,不仅因为它是矢量图标,可以轻松解决图标适配和颜色问题,而且它是以字体文件的形式存在项目中,比起常规图片更能节省 App 的体积。
而 react-native-vector-icons 是在 GitHub 上最火的 React Native 的 iconfont 图标库,也是这文章的主角。
react-native-vector-icons安装
先给项目添加该库
npm install --save react-native-vector-icons
//或者
npm install -g yarn
yarn add react-native-vector-icons
Android平台上的配置
1.自动配置
react-native link react-native-vector-icons
// 或者
npm install -g rnpm
rnpm link react-native-vector-icons
这个脚本命令可以帮你自动配置好,如果是运行成功的情况下,可惜往往都是失败的。如果这步成功了,而且能够正常运行,下面这些就可以忽略了。
2.手动配置
添加字体文件(这一步千万不能忘记,不然就算运行成功你也看不到图标)
到项目中的 node_modules/react-native-vector-icons/Fonts,里面有很多已经内置的图标库字体文件,依照自己的需求,复制需要的字体文件到 /app/src/main/assets/fonts ( 如果没有这个目录就自行创建 ) 即可。
配置 android/settings.gradle
在现有的代码上添加如下代码:
include ':react-native-vector-icons' project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
配置主 App 的 build.gradle
dependencies { compile fileTree(dir: "libs", include: ["*.jar"]) compile project(':react-native-vector-icons') //新添加的 compile "com.android.support:appcompat-v7:23.0.1" compile "com.facebook.react:react-native:+" // From node_modules }
修改主 App 的 MainApplication.java 文件
@Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), //新添加的 new VectorIconsPackage() ); }
运行报错的解决方法
运行时可能会遇到下面这个报错:
error: bundling failed: Error: While resolving module `react-native-vector-icons/MaterialIcons`, the Haste package `react-native-vector-icons` was found. However the module `MaterialIcons` could not be found within the package. Indeed, none of these files exist:
这个是系统版本引发的问题,因为 React Native 系统配置的文件和 react-native-vector-icons 里面的文件重复了,解决方法就是删除重复的文件,到 /node_modules/react-native/local-cli/core/_fixtures_/files/package.json 里面删除了 package.json 即可,删除之前记得备份一下文件。
到这里配置就全部完成,接下来就可以在 React Native 项目中使用 iconfont 了。
简单的使用
要使用 ttf 里面的 iconfont ,首先要先知道里面有什么图标,到 node_modules\react-native-vector-icons\glyphmaps 里面可以看到很多 json 文件:
打开其中一个来看,全是下面这种结构:
不难看出,这些就是图标的字符串对应表,下面我们就在代码里面使用其中一个试试:
import Icon from "react-native-vector-icons/Ionicons"
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Icon name="ios-settings" size={15} color="red" />
<Icon name="ios-settings" size={25} color="yellow" />
<Icon name="ios-settings" size={35} color="black" />
</View>
);
}
}
运行效果如下:
可以看到,同一个形状的图标,可以轻易修改为不同的尺寸和颜色并且不失真。
iOS 平台上面的配置
暂时没有苹果电脑,这里就无法展示了,具体请参考 Github 的配置,不过看文档应该比 Android 简单的多。
使用自定义的 iconfont
前面都只是使用项目自带的 iconfont ,如果要使用其他人或者自己制作的 iconfont 应该怎么办呢?比如使用阿里巴巴矢量图标库上面的 iconfont 呢?
将需要的图标添加入库,然后下载代码即可:
点击下载至本地并解压缩,里面包含所有的字体文件。找到 iconfont.ttf,这是需要的文件。
要使用刚才我们下载的图标,就需要知道在 iconfont.ttf 里面的图标字符码,虽然我们可以直接在阿里巴巴矢量图标库看到具体的字符码:
这里需要忽略前面的 &#x
,主要的字符代码就是 e6a0
;将它转为十进制的 59040
就是我们需要的 json
文件中的字符串映射。
这里数量还算少了,如果有上百个,我们一个一个来手动换算岂不是累死?这里推荐一个 Python
的工具库。
由于 React Native 的开发环境就要求安装 Python
,这里就不说怎么安装了,只需要配置好 Python
的环境变量:
通过命令行安装 fonttools
pip install fonttools
然后在 Github 上面克隆 react-native-iconfont-mapper 到本地并将刚才的 .ttf
文件放在项目根目录中即可:
在命令行中执行:
python iconfont-mapper.py iconfont.ttf iconfont.js
这样子就会生成一个 iconfont.js 文件,里面我们需要的图标映射的字符串:
var map = {"favorite":"59040","cart":"59032","back":"59031","x":"120","close":"59034","delete":"59037","edit":"59038",};
;module.exports = (name)=>String.fromCharCode(map[name]);
;module.exports.map = map;
然后我们就可以模仿着源码来使用了,通过 import Icon from "react-native-vector-icons/Ionicons"
进入源码中:
import createIconSet from './lib/create-icon-set';
import glyphMap from './glyphmaps/Ionicons.json';
const iconSet = createIconSet(glyphMap, 'Ionicons', 'Ionicons.ttf');
export default iconSet;
export const Button = iconSet.Button;
export const TabBarItem = iconSet.TabBarItem;
export const TabBarItemIOS = iconSet.TabBarItemIOS;
export const ToolbarAndroid = iconSet.ToolbarAndroid;
export const getImageSource = iconSet.getImageSource;
可以看到核心代码就前面 3 行,那就简单了,做点简单的修改即可:
import {createIconSet} from "react-native-vector-icons"
const glyphMap = {
favorite: 59040,
cart: 59032,
back: 59031,
x: 120,
close: 59034,
delete: 59037,
edit: 59038,
};
const myIcons = createIconSet(glyphMap, 'iconfont', 'iconfont.ttf');
export default myIcons;
回到一开始运行的 App.js ,导入这个新的 iconfont 文件:
import MyIcons from "./MyIcons";
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<MyIcons name="favorite" size={15} color="red" />
<MyIcons name="cart" size={25} color="yellow" />
<MyIcons name="x" size={35} color="black" />
<MyIcons name="edit" size={45} color="gray" />
</View>
);
}
}
不要以为已经完事了,还差最后一步呢。就是把 iconfont.ttf
放在 \android\app\src\main\assets\fonts
里面并重新安装 APK,才可以看到下面的结果: