React-Native设置自定义字体文件
今天主要说说如何通过字体文件加载应用中的一些图标
首先推荐一个网站iconfont-阿里巴巴矢量图标库，这里有海量的图标，可以下载你想要的各种矢量图标，你也可以在注册并登陆账号后，把自己想要的图标打包、下载为文件
效果
-
关于
<Text>组件
通过fontFamily可以指定<Text>显示的字体文件，下文将详细说明 -
代码
<View style={styles.container} > <Text style={styles.iconStyle}></Text> <Text style={styles.iconStyle}></Text> <Text style={styles.iconStyle}></Text> <Text style={styles.iconStyle}></Text> <Text style={styles.iconStyle}></Text> </View> //样式 const styles = StyleSheet.create({ container:{ backgroundColor:'white', width:width-44, height: 36, marginTop: 2, flexDirection:'row', alignItems: 'center', justifyContent: 'space-around' }, iconStyle: { color: 'red', fontFamily:'iconfont', fontSize: 30 } }) -
效果图：
用字体文件加载图标
解释
-
从阿里巴巴矢量图标库中选择适合的图标，并打包下载
-
下载后得到如下文件，
iconfont.tff即为所需文件
-
在根工程目录下创建
assets/fonts/文件夹，导入iconfont.ttf文件
1. iOS
- 把
iconfont.ttf文件拖到iOS工程目录下
-
修改Info.plist
在info.plist文件中添加key为
Fonts provided by application的Array中添加itemiconfont.ttf，到此为止，已经可以在RN项目（iOS端）中使用对应fontFamily:iconfont中的字体图标了
如下图所示：
2. Android
之所以在工程目录下创建assets/fonts这样的路径，就是为了iOS和Android统一，因为Android必须要把字体文件放在[project root]/android/app/src/main/assets/fonts/文件夹下才能生效，好吧，我们把工程目录下的assets拷贝一份（可以通过编写脚本自动执行）到Android/app/src/main目录下
3. 使用
<View style={styles.container} >
<Text style={{fontFamily:'iconfont'}}></Text>
<Text style={{fontFamily:'iconfont'}}></Text>
<Text style={{fontFamily:'iconfont'}}></Text>
<Text style={{fontFamily:'iconfont'}}></Text>
<Text style={{fontFamily:'iconfont'}}></Text>
</View>
效果就是文章开篇的效果图了
4. 弊端
图标对应的是unicode码，不够直观， (如："", "")跟显示的图标没有直接的对应关系
更新
最近注意到有评论反映在iOS端运行报错
Unrecognized font family 'iconfont'
通过跟@_MinYa_的沟通，发现了一种导致上述问题的可能性
在阿里巴巴矢量图标库中新建项目的时候注意FontClass/Symbol前缀和Font Family
默认值是icon和iconfont
如果这里有自定义的情况的话，在代码中引用的时候fontFamily:'自定义FontFamily'
鉴于上述问题，强烈建议创建字体文件项目的时候使用默认名称
网友评论
<View style={styles.container} >
<Text style={styles.iconStyle}></Text>
<Text style={styles.iconStyle}></Text>
</View>
iconStyle: {
color: 'red',
fontFamily:'iconfont',
fontSize: 30
}
而不是：
<View style={styles.container} >
<Text style={{fontFamily:'iconfont'}}></Text>
<Text style={{fontFamily:'iconfont'}}></Text>
</View>
我第一眼看见以为安卓的不支持iconStyle: {
color: 'red',
fontFamily:'iconfont',
fontSize: 30
}这么写；我试了一下，可以这么写。我刚开始学RN，不好意思；
是styles.iconStyle，
//样式
const styles = StyleSheet.create({
iconStyle: {
color: 'red',
fontFamily:'iconfont',
fontSize: 30
}
}
没有的话自己手动添加，文中相关图片做了更新，你看一下
var txt = '®';
return <Text>{txt}</Text>
如果把字符变成变量的话，在视图里面，就直接显示字符串了，而不是图标
确保 Fonts provided by application 的Array中有 fonts/1.ttf 和 fonts/2.ttf
你的错误提示也没写全