React Native 中添加自定义字体的方法

更新时间：2022年08月01日 11:51:53 作者：todoit

这篇文章主要介绍了如何在 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 antd如何防止一份数据多次提交
这篇文章主要介绍了react antd如何防止一份数据多次提交问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
React Agent 自定义实现代码
在使用langchain的ReactAgent遇到问题后,作者尝试自定义ReactAgent实现,通过详细分析langchain中的agent功能和问题,结合React思想,作者设计了新的agent逻辑并在GitHub上分享了代码,新的ReactAgent通过改进prompt和工具调用逻辑,提升了任务执行的效果和稳定性
2024-10-10
React 小技巧教你如何摆脱hooks依赖烦恼
Hooks 是一种函数，该函数允许您从函数式组件 “勾住(hook into)” React 状态和生命周期功能。 Hooks 在类内部不起作用 - 它们允许你无需类就使用 React，本文带领大家学习React 小技巧教你如何摆脱hooks依赖烦恼，感兴趣的朋友一起看看吧
2021-05-05
详解如何封装和使用一个React鉴权组件
JavaScript 和 React 提供了灵活的事件处理机制,特别是通过利用事件的捕获阶段来阻止事件传播可以实现精细的权限控制,本文将详细介绍这一技术的应用,并通过实践案例展示如何封装和使用一个 React 鉴权组件,需要的可以参考下
2024-03-03
react项目中使用react-dnd实现列表的拖拽排序功能
这篇文章主要介绍了react项目中使用react-dnd实现列表的拖拽排序,本文结合实例代码讲解react-dnd是如何实现，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-02-02
ReactNative中使用Redux架构总结
本篇文章主要介绍了ReactNative中使用Redux架构总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12
详解React组件卸载怎么中止递归方法
最近在处理项目代码的时候,出现了一个bug,组件中的方法在组件卸载后仍然在执行,代码片段发给我看,但是变量的用意我也不懂,只看到有方法调用自身方法,这不就是递归嘛,所以本文详细给大家介绍了React组件卸载怎么中止递归方法,需要的朋友可以参考下
2024-01-01
React this.setState方法使用原理分析介绍
我们知道，在React中没有像Vue那种数据双向绑定的效果。而this.setState方法就是用来对数据进行更改的。而通过this.setState方法更改的数据，会让组件的render重新渲染，并且刷新数据
2022-09-09
React中遍历数组生成标签问题
这篇文章主要介绍了React中遍历数组生成标签问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
浅谈React组件在什么情况下会重新渲染
当我们使用React编写组件时,组件的重新渲染是一个重要的概念,本文主要介绍了React组件在什么情况下会重新渲染,具有一定的参考价值,感兴趣的可以了解一下
2023-12-12