如何在反应原生android中添加自定义字体答案

【问题标题】：How to add custom font in react native android如何在反应原生android中添加自定义字体
【发布时间】：2024-04-30 06:05:02
【问题描述】：

我想将 fontFamily 设置为使我的工具栏标题变薄。

我在我的android项目的assets/fonts文件夹中添加了roboto thin ttf，但是它似乎在运行应用程序时产生了问题。我在运行时遇到了这个问题

react-native 开始

ERROR  EPERM: operation not permitted, lstat 'E:\Myntra\android\app\build\gener
ated\source\r\debug\android\support\v7\appcompat'
{"errno":-4048,"code":"EPERM","syscall":"lstat","path":"E:\\Myntra\\android\\app
\\build\\generated\\source\\r\\debug\\android\\support\\v7\\appcompat"}
Error: EPERM: operation not permitted, lstat 'E:\Myntra\android\app\build\genera
ted\source\r\debug\android\support\v7\appcompat'
    at Error (native)

当我删除字体时，它工作正常。我无法解决这个问题。是什么原因？

【问题讨论】：

在*.com/a/52916277/5519329有一步一步的解释
请注意，如果您不想使用 Postscript 名称（例如 FontName-Bold 这将导致 typefont 修饰符，例如 fontWeight，则与 Android 上的字体不匹配，除了与 iOS 上处理字体的方式不一致之外，您还应该遵循本指南：*.com/a/70247374/2779871

标签： android react-native react-native-android

【解决方案1】：

更新

这里有很多答案是为了在版本

对于那些使用 react-native version > 0.60 ， 'rnpm' is deprecated 和自定义字体的人将无法使用。

现在，为了在 react-native 版本 > 0.60 中添加自定义字体，您必须：

1- 在项目的根文件夹中创建一个名为 react-native.config.js 的文件。

2- 在新文件中添加这个

module.exports = {
project: {
    ios: {},
    android: {},
},
assets: ['./assets/fonts']
};

3- 在根项目路径下运行react-native link 命令。

PS在运行react-native link命令之前确保你有正确的字体文件夹路径

【讨论】：

这个在这里！这是 0.60+ 版本的正确答案！
很好的答案。不过需要注意的是：这不适用于 iOS，除非您也将构建系统更改为旧版。
@SwiftsNamesake 在哪里可以更改构建系统？它是某个地方的配置吗？
@codin *.com/questions/51205221/…
工作就像一个魅力

【解决方案2】：

添加你的字体文件
- Project folder/android/app/src/main/assets/fonts/font_name.ttf
使用react-native run-android重新启动包管理器
然后你可以在你的风格中使用你的字体，例如
- fontFamily: 'font_name'

在此处查看更多示例Custom Font Examples

【讨论】：

在这些步骤之后是否需要任何 import 或 require 语句才能使用字体？
它适用于我，无需进行任何额外的配置或导入

【解决方案3】：

将你所有的字体放在你的 React-Native 项目目录中

./assets/fonts/

在您的 package.json 中添加以下行

"rnpm": {
  "assets": ["./assets/fonts"]
}

最终从你的项目目录在终端运行

$ react-native link

在您的样式中以这种方式声明使用它

fontFamily: 'your-font-name without extension'

如果你的字体是 Raleway-Bold.ttf 那么，

fontFamily: 'Raleway-Bold'

【讨论】：

这个答案比公认的要好，它更干净，也适用于 ios。
对我来说它根本无法在 android 上运行。字体存在于app/src/assets/fonts 中。尝试使用不带扩展名的文件名以及适用于 iOS 的字体系列名称。
这已经过时了。 react-native link 不应与 RN60 一起使用，并且 rnpm 已被弃用
@AmanDeep 请参考我上面的答案。
如果您已经在使用 react-native-vector-icons，请不要忘记从 android assets 文件夹中删除重复文件

【解决方案4】：

更新：

从 cli docs 开始，“rnpm”已被弃用，并且在 CLI 的下一个主要版本中将删除对它的支持。

相反，在您的项目文件夹中创建一个react-native.config.js

module.exports = {
  assets: ['./assets/fonts'],
};

将您的字体放在 ./assets/fonts 中。在样式属性{fontFamily: 'McLaren-Regular'} 中引用您的字体（例如 McLaren-Regular.ttf）。如果你使用styled components，那么font-family: McLaren-Regular

这两个平台都不需要链接或旧版构建设置。如果这不起作用（有时对我不起作用），请运行 npx react-native link，即使您使用的是自动链接。

【讨论】：

自动链接 ---> Even if you're using autolink
重要：不要忘记链接和清理！

【解决方案5】：

如果您使用的是 React Native，那么您可能也在使用 Expo。如果是这种情况，那么您可以使用 Expo 的 Font.loadAsync 方法加载自定义字体。

步骤：

将下载的字体放到./assets/fonts目录下（如果目录不存在，则创建）
从目标组件（例如：App.js）加载 Expo 的 Font 模块：
```
import { Font } from 'expo'
```

使用componentDidMount加载自定义字体：

componentDidMount() {
  Font.loadAsync({
    'Roboto': require('../assets/fonts/Roboto-Regular.ttf'),
  })  
}

最后，使用style 属性在<Text> 组件上应用所需的字体：

<Text style={{fontFamily: 'Roboto', fontSize: 38}}>Wow Such Title</Text>

【讨论】：

由于 Expo 的限制，不能*完全离线运行，所以我认为你的开场白有点误导。我同时使用 Expo 和 react-native，Expo 很棒，但是根本不具备许多常见用例的功能。不过答案很好

【解决方案6】：

@nitin-anand 的回答是最合适和最干净的，但该方法现在已弃用，现在我们必须在根目录中创建一个 react-native.config.js 文件，并使用以下配置作为示例：

module.exports = {
 project: {
  ios: {},
  android: {},
 },
 assets: ['./assets/fonts'], 
};

【讨论】：

【解决方案7】：

在 EXPO 中添加自定义字体

如果您使用的是 React Native，那么您可能也在使用 Expo。如果是这种情况，那么您可以使用 Expo 的 Font.loadAsync 方法加载自定义字体。

步骤

将字体移至资产/字体文件夹
从目标组件（例如：App.js）加载 Expo 的 Font 模块：

import { Font } from 'expo'

设置状态

this.state = {
   fontLoaded: false
}

使用 componentDidMount 加载自定义字体：

async componentDidMount() {
   await Font.loadAsync({
       'ComicSansBold': require('../assets/fonts/ComicSansMSBold.ttf'),
   })

   this.setState({fontLoaded: true})
}

最后，使用 style 属性在组件上应用所需的字体：

{
  this.state.fontLoaded
  ? <Text style={{
    fontSize: 48,
    fontFamily: 'ComicSansBold'
    }}>Glad to Meet You!</Text>
  : null
}

享受编码......

我的输出：

【讨论】：

【解决方案8】：

在 project.json 文件中添加

rnpm {
assets:assets/fonts 
}

然后执行 react-native 链接

【讨论】：

【解决方案9】：

对于 iOS：

在给定的文件夹结构中添加您的字体：

/资产/字体

把你的字体放进去。

在根文件夹中。添加一个名为

的文件

react-native.config.js

复制代码并粘贴

module.exports = {
assets: [‘./assets/fonts’]

}

【讨论】：

【解决方案10】：

RNPM 已合并到 React Native 核心中。这意味着您不再需要 RNPM。所以请他们不要你使用它。停止使用它。

以下是帮助您设置字体的 7 个步骤：

准备好你的字体，你可以从 GoogleFonts、AdobeFonts 等下载你的字体。字体可以是 .ttf 或 .otf
在项目的根目录中为字体创建一个配置文件。创建一个名为：

react-native.config.js
创建文件夹来存放您的字体。您可以在 assets 文件夹中创建一个名为 fonts 的文件夹。
在其中粘贴您的 .ttf 或 .otf 字体。
在 react-native.config.js 文件中编写配置，并粘贴以下内容：

module.exports = { 资产：['./src/assets/fonts']， };

将路径更改为包含字体的文件夹的路径。

现在为 Android 和 IOS 原生设置字体。您无需手动执行此操作，只需在终端上运行即可：

反应原生链接
您添加的任何新字体，请确保您在终端上再次运行 react-native link 以本地设置字体。

【讨论】：

【解决方案11】：

在 Project.json 中设置：
```
rnpm { 
    assets:assets/fonts
}
```
反应原生链接

【讨论】：

【解决方案12】：

最好的方法是为 Text 创建您自己的自定义组件并从另一个文件中导入它。

假设您要将默认字体更改为“opensans-semibold”（这是我下载并保存后给它的名称）。

打字稿：

import React from 'react';
import { Text as DefaultText, StyleSheet } from 'react-native';

export function Text(props : any) {
    return(
        <DefaultText style={[styles.defaultStyles, props.style]}> {props.children} </DefaultText>
    )
}
    
const styles = StyleSheet.create({
    defaultStyles: {
        fontFamily: "opensans-semibold"
    }
});

现在将其导入其他任何地方：

import { Text } from './path/to/component'

并像往常一样使用它。

【讨论】：

【解决方案13】：

小心 src 文件夹中的资产

在 react-native.config.js 文件中

module.exports = {
project: {
    ios:{},
    android:{}
},
assets: ['./src/assets/fonts']// assets in src folder
// assets: ['./assets/fonts']// if assets in root use this

}

【讨论】：

【解决方案14】：

对于安卓：

将您的自定义字体放在以下文件夹中：

项目文件夹/android/app/src/main/assets/fonts/font_name.ttf

运行 react-native run-android

使用代码中的字体：

title: { fontSize: 20, fontFamily: "字体名称" },

【讨论】：

这基本上是已经接受的答案的副本。它并没有给这个问题带来任何新的东西。