React Native 中添加自定义字体的方法
更新时间：2022年08月01日 11:51:53 作者：todoit
这篇文章主要介绍了如何在 React Native 中添加自定义字体,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
在 React Native 中，如何添加自定义字体呢？React Native 提供了便捷的命令行工具来帮助我们。
添加字体
在项目根目录下创建 assets/fonts 文件夹，把字体文件放到这个文件夹下。
如图：
定义 assets 目录
在项目根目录下创建 react-native.config.js 文件，编辑其中内容，留意第 6 行，这和我们自定义字体文件所在目录一致。
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./assets/fonts/'],
}执行 link 命令
执行 npx react-native link 命令，
对于 Android 来说，这个命令做了如下事情：
将字体文件拷贝到 android/app/src/main/assets/fonts 目录下，如图
对于 iOS 来说，这个命令做了如下事情：
创建 Resources 文件夹，并将字体文件 link 到该文件夹下，如图
注意 iOS 并没有拷贝字体文件，而是通过相对路径指向了字体文件所在。
iOS 所做的另外一件事情便是修改 Info.plist 文件，添加了字体配置
<key>UIAppFonts</key> <array> <string>DFWaWaSC-W5.otf</string> </array>
当明白了 npx react-native link 所做的事情后，我们也可以通过手动的方式添加字体。
在样式中使用字体
在样式表中，使用 fontFamily 属性来指定字体。
const styles = StyleSheet.create({
text: {
backgroundColor: 'transparent',
fontSize: 17,
fontFamily: 'DFWaWaSC-W5',
textAlign: 'center',
margin: 8,
},
})
示例
这里有一个示例，供你参考。
也可以参考这篇文章，讲得比本文要好。
到此这篇关于如何在 React Native 中添加自定义字体的文章就介绍到这了,更多相关React Native自定义字体内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
React是一种流行的JavaScript库,它被广泛应用于构建Web应用程序,在React中,条件渲染是一个非常重要的概念,它允许我们根据不同的条件来呈现不同的内容,在本文中,我们将探讨React如何进行条件渲染,需要的朋友可以参考下2023-11-11
useState通过在函数组件里调用它来给组件添加一些内部state,下面这篇文章主要给大家介绍了关于React中useState的使用方法及注意事项的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
react事件绑定时。this并不会指向当前DOM元素。往往使用bind来改变this指向，今天通过本文给大家介绍React事件绑定的方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-02-02
现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS，ReactJs的虚拟DOM（Virtual DOM）和组件化的开发深深的吸引了我，下面来跟我一起领略ReactJs的风采吧~~ 文章有点长，耐心读完，你会有很大收获哦2021-04-04
解决React报错The tag is unrecognized in this browser
这篇文章主要为大家介绍了解决React报错The tag is unrecognized in this browser示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
forwardRef和memo是React中用于性能优化和组件复用的两个高阶函数,本文给大家介绍react中的forwardRef 和memo的区别及适用场景,感兴趣的朋友跟随小编一起看看吧2023-10-10
这篇文章主要介绍了详解React 服务端渲染方案完美的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要为大家介绍了React Context 变迁及背后实现原理示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
使用redux管理数据，由于Store独立于组件，使得数据管理独立于组件，解决了组件之间传递数据困难的问题，非常好用，今天重点给大家介绍使用react+redux实现计数器功能及遇到问题，感兴趣的朋友参考下吧2021-06-06
这篇文章主要为大家介绍了TypeScript在React中的应用技术实例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
最新评论