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+ts组件库(封装antd)的详细过程
这篇文章主要介绍了从零搭建react+ts组件库（封装antd）,实际上，代码开发过程中，还有很多可以辅助开发的模块、流程，本文所搭建的整个项目，我都按照文章一步一步进行了git提交，开发小伙伴可以边阅读文章边对照git提交一步一步来看
2022-05-05
useEffect支持async及await使用方式
这篇文章主要为大家介绍了useEffect支持async及await的使用方式示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
React jsx转换与createElement使用超详细讲解
这篇文章主要介绍了React jsx转换与createElement使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2022-11-11
react-native DatePicker日期选择组件的实现代码
本篇文章主要介绍了react-native DatePicker日期选择组件的实现代码，具有一定的参考价值，有兴趣的可以了解下
2017-09-09
JS中使用react-tooltip插件实现鼠标悬浮显示框
前段时间遇到的一个需求,要求鼠标悬停显示使用描述, 用到了react-tooltip插件,今天写一个总结，感兴趣的朋友跟随小编一起看看吧
2019-05-05
React 项目中动态设置环境变量
本文主要介绍了React 项目中动态设置环境变量，本文将介绍两种常用的方法，使用 dotenv 库和通过命令行参数传递环境变量，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
详解基于React.js和Node.js的SSR实现方案
这篇文章主要介绍了详解基于React.js和Node.js的SSR实现方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
react实现Radio组件的示例代码
这篇文章主要介绍了react实现Radio组件的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
解决react组件渲染两次的问题
这篇文章主要介绍了解决react组件渲染两次的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
React中useEffect函数的使用详解
useEffect是React中的一个钩子函数,用于处理副作用操作,这篇文章主要为大家介绍了React中useEffect函数的具体用法,希望对大家有所帮助
2023-08-08