236被浏览38,416分享邀请回答3111 条评论分享收藏感谢收起199 条评论分享收藏感谢收起写回答React Native 配置自定义字体原文链接：本想着配置自定义字体不是什么大坑，官网文档找了一下，没有。遂关键字：“React Native 配置自定义字体”这么一搜。都是一样的文章，作者名却是各式各样，真是天下文章大家抄。然而试了一下并不好用。
（这里使用最新的RN 0.48.4 测试）
这里想一下React Native最新的，最省事的配置自定自定义字体的方法：1）随便下载一个字体（不要改名字，会有坑）我这里随便下了一个scratchmyback的英文字体。 SCRATCHMYBACK.TTF
2）在项目根目录创建文件夹assets/fonts。并把刚才下载的字体放进去。
3）在Package.json告诉React Native 咱们自定义的字体在哪里：
"assets": [
"./assets/fonts/"
4) react-native link （并不需要手动打开xcode，copy文件夹进项目）
5) IOS需要在Info.plist文件里添加将要使用的自定义字体：
&key&UIAppFonts&/key&
&string&SCRATCHMYBACK.TTF&/string&
Android link操作自动把引入字体copy到了android/app/src/main/assets/fonts/文件夹下。确认一下就好。
6）现在就可以在香炉里通过fontFamily使用自定义字体咯。重新编译一下 大功告成~
相关热门文章分享react-native 怎么设置字体_百度知道
react-native 怎么设置字体
我有更好的答案
点击这样就快找到我们要的了5看到右边字体一列有很多的选项，我们只需要修改basic里面的6点击展开Basic,最下面有 Text Font 这个选项，点击7然后右边的Edit被激活了，点击Edit8在这里我们把字体修改成我们想要的就OK了9最后一路OK会到主界面，appearance在general展开后的第一行,找到window2点击后在下拉菜单中找到preferences3在左边的菜单栏中找到general1打开eclipse，点击展开appearance4找到colors and fonts
采纳率：76%
为您推荐：
其他类似问题
您可能关注的内容
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。React-Native使用自定义字体文件iconfont - 简书
React-Native使用自定义字体文件iconfont
React-Native设置自定义字体文件
今天主要说说如何通过字体文件加载应用中的一些图标
首先推荐一个网站，这里有海量的图标，可以下载你想要的各种矢量图标，你也可以在注册并登陆账号后，把自己想要的图标打包、下载为文件
通过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&
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文件
把iconfont.ttf文件拖到iOS工程目录下
修改Info.plist
在info.plist文件中添加key为 Fonts provided by application的Array中添加item iconfont.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目录下
&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&
效果就是文章开篇的效果图了
图标对应的是unicode码，不够直观， (如："?",
"?")跟显示的图标没有直接的对应关系
最近注意到有评论反映在iOS端运行报错
Unrecognized font family 'iconfont'
通过跟的沟通，发现了一种导致上述问题的可能性
在中新建项目的时候注意FontClass/Symbol前缀和Font Family
默认值是icon和iconfont
如果这里有自定义的情况的话，在代码中引用的时候fontFamily:'自定义FontFamily'
鉴于上述问题，强烈建议创建字体文件项目的时候使用默认名称
后台！后台！
我是前端！我是前端！
收到请回答！收到请回答！
React-Native设置自定义字体文件 今天主要说说如何通过字体文件加载应用中的一些图标 首先推荐一个网站iconfont-阿里巴巴矢量图标库，这里有海量的图标，可以下载你想要的各种矢量图标，你也可以在注册并登陆账号后，把自己想要的图标打包、下载为文件 下面说重点 iO...
本文主要讨论如何在 React Native 中快捷配置 iconfont - 自定义字体文件。 工具类库及网站索引： react-native-vector-icons fontello iconfont - 阿里巴巴矢量图图标 最终效果 简单的设置 Icon 组件的 n...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
前言 React Native大火大热，其中为了解决图标，易于修改，换颜色，高清等需求，你还是选择切多套png来适配吗？答案当然是否定的！不知从何时起，扁平化图标成为潮流，iconfont也应运而生，最先接触iconfont已是多年前的事了，那时候只知道怎么在web上使用，...
从阿里巴巴矢量图标库中选择适合的图标，并打包下载 下载后得到如下文件，iconfont.tff即为所需文件 在根工程目录下创建assets/fonts/文件夹，导入iconfont.ttf文件 iOS把fonts文件夹拖到iOS工程目录下注意最终得到的是蓝色的文件夹 修改I...
《西游记》是一部具有深远意义的古典巨著，是吴承恩老先生留给后人的宝贵财富。相信很多人是看着西游故事长大的，曾几何时因其中的打斗欢呼雀跃，成为齐天大圣孙悟空的超级崇拜者。也正因为此，出于对童年情结的怀念以及为了将孙悟空的英雄主义与无畏精神传播给更多更广的青少年朋友，《械西游》...
朱昊朱昊写字的地方 这是一篇旧文，原文写于2015年10月。 90万字的《三体》三部曲：《三体》、《三体2：黑暗森林》、《三体3：死神永生》读完了，其中第一本是9个月前读的，第二部和第三部是最近国庆假期和之后的一周读的，两周读完后两本书，对于我来说绝对是...
成熟是学会克制忍耐和自我管理，为了爱的人不断努力
原创文章，欢迎转载。转载请注明：关东升的博客 看下面的示例代码是不是使用过： var studentList: String[] = [&张三&,&李四&,&王五&] studentList[0] = &诸葛亮& var studentDictionary = [102: ...学习本系列内容需要具备一定 HTML 开发基础，没有基础的朋友可以先转至
本人接触 React Native 时间并不是特别长，所以对其中的内容和性质了解可能会有所偏差，在学习中如果有错会及时修改内容，也欢迎万能的朋友们批评指出，谢谢
文章第一版出自简书，如果出现图片或页面显示问题，烦请转至
查看 也希望喜欢的朋友可以点赞，谢谢
Text 组件介绍
在 React Native 用于显示文本的组件就是 Text，和iOS中的 UIlabel，Android中的 TextView类似，专门用来显示基本的文本信息，处理基本的显示布局外，还可以进行嵌套显示，设置样式，已经事件处理（如：点击事件）
Text 组件常用的属性和方法
color：字体颜色
// 字体颜色
color:'blue'
numberOfLines：设置 Text 显示文本的行数，如果显示的内容超过行数，默认其余的文本信息不再显示
render() {
&View style={styles.container}&
&Text style={styles.textStyle} numberOfLines={3}&雨泽Forest雨泽Forest雨泽Forest雨泽Forest雨泽Forest雨泽Forest雨泽Forest雨泽Forest雨泽Forest&/Text&
fontSize：字体大小
// 字体大小
fontSize:30
fontFamily：字体名称
// 字体类型
fontFamily:'Georgia'
fontStyle（'normal', 'italic'）：字体风格
// 字体风格
fontStyle:'italic'
fontWeight（'normal', 'bold', '100 ~ 900'）：指定字体的粗细。大多数字体都支持'normal'和'bold'值。并非所有字体都支持所有的数字值。如果某个值不支持，则会自动选择最接近的值
// 字体粗细
fontWeight:('bold', '700')
textShadowOffset（width: number, height: number）：设置阴影效果
textShadowColor：阴影效果颜色
textShadowOffset:{width:3, height:5},
// 阴影颜色
textShadowColor:'black'
textShadowRadius：阴影效果圆角（值越大阴影越模糊）
// 阴影圆角
textShadowRadius:3
letterSpacing：字符间距
// 字符间距
letterSpacing:5
lineHeight：行高
lineHeight:25
textAlign（'auto', 'left', 'right', 'center', 'justify'）：文本对齐方式
// 文本对齐方式
textAlign:'auto'
// 文本对齐方式
textAlign:'left'
// 文本对齐方式
textAlign:'right'
// 文本对齐方式
textAlign:'center'
// 文本对齐方式
textAlign:'justify'
textDecorationLine（'none', 'underline', 'line-through'）：横线位置
none：没有横线
underline：
textDecorationLine:'underline'
line-through:
textDecorationLine:'line-through'
textDecorationStyle（'solid', 'double', 'dotted', 'dashed'）：线风格
// 横线风格
textDecorationStyle:'solid'
// 横线风格
textDecorationStyle:'double'
// 横线风格
textDecorationStyle:'dotted'
// 横线风格
textDecorationStyle:'dashed'
textDecorationColor：线的颜色
// 线的颜色
textDecorationColor:'black',
allowFontScaling：控制字体是否要根据iOS的“文本大小”辅助选项来进行缩放
adjustsFontSizeToFit：指定字体是否随着给定样式的限制而自动缩放
minimumFontScale：当adjustsFontSizeToFit开启时，指定最小的缩放比（即不能低于这个值）。可设定的值为0.01 - 1.0
suppressHighlighting：当为true时，如果文本被按下，则没有任何视觉效果。默认情况下，文本被按下时会有一个灰色的、椭圆形的高光
selectable：决定用户是否可以长按选择文本，以便复制和粘贴
render() {
&View style={styles.container}&
&Text style={styles.textStyle}
selectable={true}
雨泽Forest
testID：用来在端到端测试中标记这个视图
onPress：当文本发生点击的时候调用该方法
render() {
&View style={styles.container}&
&Text style={styles.textStyle}
onPress={()=&{alert('点击')}}
雨泽Forest
onLongPress：当文本被长按以后调用此回调函数（参考onPress）
onLayout：当挂载或者布局变化以后调用（参数为：{nativeEvent: {layout: {x, y, width, height}}}）(参考onPress)
render() {
&View style={styles.container}&
&Text style={styles.textStyle}&雨泽Forest&/Text&
var styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'green',
textStyle: {
backgroundColor:'yellow',
// 字体大小
fontSize:30,
// 下划横线
textDecorationLine:'underline'
Text 组件的嵌套使用
var test = React.createClass({
render() {
&View style={styles.container}&
&Text style={styles.textStyle} numberOfLines={3}&
&Text style={{color:'orange'}}&
var styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'green',
textStyle: {
// 字体颜色
color:'blue',
// 字体大小
fontSize:30
Text 组件中样式的继承
在 React Native 中是没有样式继承这种说法的，但对于 Text 元素里边的 Text 元素，其实是可以继承的，至于是单继承还是多继承，我们可以来试验一下
var test = React.createClass({
render() {
&View style={styles.container}&
&Text style={styles.textStyle} numberOfLines={3}&
&Text&雨泽Forest&/Text&
var styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'green',
textStyle: {
// 字体颜色
color:'blue',
// 字体大小
fontSize:30
通过试验我们可以看出，文字控制类的属性也是多继承的，和 CSS 是一样的,而且会取与自己最近的属性归自己所用，也就是说属性可覆盖
很多朋友私信我说更新太慢，在这里说声抱歉，因为接近春节，公司事情比较多，还请朋友们见谅，喜欢我的文章的可以点点关注，有什么不清楚或者建议可以评论或留言，谢谢！
阅读(...) 评论()