前言
React Native大火大热,其中为了解决图标,易于修改,换颜色,高清等需求,你还是选择切多套png来适配吗?答案当然是否定的!不知从何时起,扁平化图标成为潮流,iconfont也应运而生,最先接触iconfont已是多年前的事了,那时候只知道怎么在web上使用,它带来的便捷性和可扩展性也是大家有目共睹。 最先接触iconfont这一概念还是从一些国外的图标网站得来,譬如flaticon、icomoon,但这些毕竟都是国外的平台,身在大天朝说实话用的有些不习惯,这时候iconfont.cn应运而生,完全针对中国的iconfont平台,在使用上最起码很顺手。好了,说了这么多只想重申一点,iconfont你值得拥有,无论事web,还是app,亦或是我们今天的主角(react-native)。
一、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
复制代码
1、android平台
1.1、自动配置
react-native link react-native-vector-icons
// 或者
npm install -g rnpm
rnpm link react-native-vector-icons
复制代码
会为你配置好所有,但是这是成功的情况下,你不需要操心任何事,但是往往不能如愿。如果你这步成功了,而且能够正常运行,下面这些你就可以跳过!
1.2、手动配置
1.2.1 复制字体文件(这一步千万不能忘记,不然就算运行成功你也看不到图标)
找到项目node_modules/react-native-vector-icons/Fonts,里面有很多已经内置的图标库字体文件,依照自己的需求,复制你需要的字体文件到 android/app/src/main/assets/fonts,(如果没有这个目录就自行创建)
1.2.2 配置 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')
复制代码
1.2.3 配置android/app/build.gradle
修改如下:
dependencies {
compile project(':react-native-vector-icons') //添加
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:+" // From node_modules
compile project(':react-native-navigation')
}
复制代码
1.2.4 配置 android/app/src/main/java/com/xxxx/MainApplication.java
import com.oblador.vectoricons.VectorIconsPackage;
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
+ , new VectorIconsPackage()
);
}
复制代码
到这里配置就全部完成,接下来就可以在rn项目中使用iconfont
import Icon from 'react-native-vector-icons/dist/Ionicons';
<Icon name='ios-settings' size={16} color="#fff"/>
复制代码
2、ios平台
相对android来说简单很多,可以参照github上面的步骤来!
三、使用自定义iconfont
说了这么多,还只是它自带的图标库的使用,如果我们要使用自己自定义的一些图标呢,譬如iconfont.cn上面的
1、图标准备
如上图,作为测试,我准备了上述图标。点击下载至本地,里面包含所有的字体文件。找到iconfont.ttf,这是我们重点需要的文件。
2、react-native-vector-icons结构分析
如下图,找到node_modules/react-native-vector-icons的根目录,可以看到很多js文件,命名都是以图标库的名称命名,随便打开一个Ionicons.js,发现代码很简单
把这个文件复制一遍,重命名为Iconfont.js,修改为如下:
import createIconSet from './lib/create-icon-set';
import glyphMap from './glyphmaps/Iconfont.json';
const iconSet = createIconSet(glyphMap, 'fontcustom', 'Iconfont.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;
复制代码
从上面的代码我们不难看出,我们还需要个Iconfont.json文件,顺着路径可以找到很多json文件。
2.1 安装python
点击下载pthon安装包www.python.org/ftp/python/… 等待安装完成!
2.2 配置python环境变量
在path中添加 python安装目录以及Scripts
2.3 安装 fonttools
pip install fonttools
复制代码
具体介绍请参考:github地址
2.4准备react-native-iconfont-mapper
直接打包下载react-native-iconfont-mapper,或者通过git克隆到本地,这个目录自己选个容易记住的,因为以后用的比较多。
2.5 提取字符表
将前面下载的字体包中的ttf文件拷贝到这里
python iconfont-mapper.py iconfont.ttf iconfont.js
复制代码
2.5 新建icon font.json
在node_modules/react-native-vector-icons/glyphmaps中新建Iconfont.json
{
"home": 58880,
"setting": 58881,
"code": 58886,
"money": 58951,
"phone": 58952,
"user": 58890,
"customer": 58993,
"message": 59034,
"add": 59418,
"password": 58910
}
复制代码
这里需要注意,刚才生成的字符表json对象后面的值有引号,这里需要删除,由于个数比较少,我还是选择手动删除,如果多的话还是推荐正则来批量删除,但是还不会,希望有知道怎么操作的在下面留言。 到这里,扩展react-native-vector-icons,添加自定义图标就完成了,接下来就可以像上面一样引用iconfont图标了
import Icon from 'react-native-vector-icons/Iconfont'; // 不过引用的时候就要改成Iconfont了,其他的类似
复制代码
自定义iconfont的另外一种用法
上面那种方法是在react-native-vector-icons的基础上扩展其图标库,但是有时候我们往往不需要去安装这么大的一个库,甚至去引用那么多字体文件,不知道大家是否还记得我们是怎么在web端使用iconfont的
<span class="iconfont icon-home"></span
复制代码
那能不能在react-native中也这样使用呢?这样更贴合前端人员的思想 追溯到我们提取成功字符表的那一步!
var map = {"home":"58880","setting":"58881","code":"58886","money":"58951","phone":"58952","user":"58890","customer":"58993","x":"120","message":"59034","add":"59418","password":"58910",};
;module.exports = (name)=>String.fromCharCode(map[name]);
;module.exports.map = map;
复制代码
直接将这个文件拷贝到项目中,可以用如下的方式来直接使用
import icon from "./fontConf";
export default class IconExample extends Component {
render() {
return (
<View style={styles.container}>
<Text style={{fontFamily: 'Iconfont',fontSize:30}}>
arrow-icon:{icon('arrow')}
</Text>
<Text style={{fontFamily: 'Iconfont',fontSize:30, color:"#ff4444"}}>
vip-icon:{icon('tag-svip')}
</Text>
<Text style={{fontFamily: 'Iconfont',fontSize:30, color:"#ff4444"}}>
tag-svip:{icon('tag-svip')}
</Text>
</View>
)
}
}
复制代码
重点提示:以上所有操作,都需要将字体文件拷贝到android/app/src/main/assets/fonts