如何在 React Native 中添加自定义字体 android

Question

我想将fontFamily设置为工具栏标题的 roboto thin。

我在我的 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)

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

Answer 1

更新

这里有许多答案，用于在版本 < 0.60 的 react-native 中添加自定义字体。

对于那些使用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命令之前，请确保字体文件夹的路径正确

Answer 2

1. 将您的字体文件添加到

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

在此处查看更多示例自定义字体示例

Answer 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'

Answer 4

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

脚步：

1. 将下载的字体放在./assets/fonts目录下（如果目录不存在，则创建）

2. 从目标组件（例如： App.js ）加载 Expo 的Font模块：

    import { Font } from 'expo'

3. 使用componentDidMount加载自定义字体：

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

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

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

Answer 5

更新：

从cli 文档中，不推荐使用“rnpm”，并且在 CLI 的下一个主要版本中将删除对它的支持。

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

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

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

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

Answer 6

第1步：

在名为“ react-native.config.js ”的项目的根目录下创建一个配置文件

第2步：

在里面添加如下代码。

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

第 3 步：

运行以下命令：

npx react-native link       (React-native version < 0.69)
npx react-native-asset      (React-native version > 0.69)

Answer 7

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

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

Answer 8

使用 EXPO 添加自定义字体

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

脚步

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

import { Font } from 'expo'

3. 设置状态

this.state = {
   fontLoaded: false
}

4. 使用 componentDidMount 加载自定义字体：

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

   this.setState({fontLoaded: true})
}

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

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

享受编码......

我的输出：

Answer 9

在 project.json 文件中添加

rnpm {
assets:assets/fonts 
}

然后执行 react-native 链接

Answer 10

最好的方法是为 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'

并像往常一样使用它。

Answer 11

1. 在 Project.json 中设置：

    rnpm { assets:assets/fonts }

2. 反应原生链接

Answer 12

在Project.json 中设置：

rnpm {
assets:assets/fonts 
}

然后执行 react-native 链接。

Answer 13

对于ios：

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

/资产/字体

并将您的字体放入其中。

在根文件夹中。 添加名为的文件

react-native.config.js

复制代码并粘贴

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

}

Answer 14

我可以看到这个问题已经得到回答，但我想为所有新访客提供一站式解决方案。 我的团队创建了一个npm包（ react-native-fontext ）来处理中间步骤。

如果对您有帮助，请尝试使用以下软件包。

https://www.npmjs.com/package/react-native-fontext

Answer 15

对我来说最好最简单的解决方案

访问： https : //github.com/expo/google-fonts/tree/master/example

Answer 16

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

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

1. 准备好字体，您可以从 GoogleFonts、AdobeFonts 等下载字体。字体可以是 .ttf 或 .otf

2. 在项目的根目录中为字体创建一个配置文件。 创建一个名为：

   react-native.config.js

3. 创建文件夹来存放您的字体。 您可以在 assets 文件夹中创建一个名为 fonts 的文件夹。

4. 将您的 .ttf 或 .otf 字体粘贴到其中。

5. 在 react-native.config.js 文件中编写配置，并粘贴以下内容：

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

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

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

   反应原生链接

7. 您添加的任何新字体，请确保您在终端上再次运行 react-native link 以本地设置字体。

Answer 17

您可以通过 Expo-font 轻松添加 Google 和自定义 fonts 以响应原生项目。

1-在本机反应中使用谷歌 fonts：

进口博览会字体：

 import { useFonts, Inter_900Black } from '@expo-google-fonts/inter';
        // install pakages related to your favourite font for example:@expo-google-fonts/roboto & etc.

然后在组件层次结构的顶部使用这个钩子：

    let [fontsLoaded] = useFonts({
        Inter_900Black,
      });
//fontLoaded indicates the loading state of your font

使用字体：

<Text style={{ fontFamily: 'Inter_900Black'}}>Inter Black</Text>

2-在本机反应中使用自定义 fonts：

进口博览会字体：

import { useFonts } from 'expo-font';

在组件层次结构的顶部使用这个钩子：

    let [fontsLoaded] = useFonts({
    'Custom-Font': require('./assets/fonts/Custom-Font.otf'),
  });

使用字体：

<Text style={{ fontFamily: 'Custom-Font'}}>Inter Black</Text>

Answer 18

正确的方法

import React from 'react';
import { Text, View } from 'react-native';
import AppLoading from 'expo-app-loading';
import { useFonts } from 'expo-font';

export default props => {
  let [fontsLoaded] = useFonts({
    'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontFamily: 'Inter-Black', fontSize: 40 }}>Inter Black</Text>
      <Text style={{ fontSize: 40 }}>Platform Default</Text>
    </View>
  );
};

Answer 19

对于0.60以上的react-native版本，在目录根目录下创建一个react-native.config.js文件，添加如下代码，

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

而且您还应该在目录的根目录中拥有 assets 文件夹。 然后只需在终端中运行命令npx react-native-asset 。 这应该可以正常工作。

Answer 20

小心 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

}

Answer 21

对于安卓：

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

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

运行 react-native run-android

使用字体 i 您的代码：

标题：{ fontSize：20，fontFamily：“字体名称”}，