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

Question

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

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

时遇到这个问题

react-native start

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

将您的字体文件添加到
- Project folder/android/app/src/main/assets/fonts/font_name.ttf
使用react-native run-android
然后你可以在你的风格中使用你的字体，例如
- fontFamily: 'font_name'

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

Answer 2

将所有字体放入 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 3

如果您正在使用 React Native，那么您可能正在使用 Expo as well. If that's the case, then you can load custom fonts using Expo's 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>

Answer 4

更新

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

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

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

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

2- 在新文件中添加这个

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

3- 运行 react-native link 根项目路径中的命令。

PS 在运行ning react-native link 命令

之前确保字体文件夹的路径正确

Answer 5

@nitin-anand 的答案是最合适的，比其他答案更清晰，但是现在不推荐使用该方法，现在我们必须在我们的根目录中创建一个 react-native.config.js 文件，以下面的配置为例:

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

Answer 6

使用 EXPO 添加自定义字体

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

步骤

将字体移动到 asset/fonts 文件夹
从目标组件（例如：App.js）加载Expo的字体模块：

import { Font } from 'expo'

设置状态

this.state = {
   fontLoaded: false
}

使用 componentDidMount 加载自定义字体：

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

   this.setState({fontLoaded: true})
}

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

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

享受编码....

我的输出：

Answer 7

更新：

从 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，即使您使用的是自动链接。

Answer 8

设置在Project.json:
```
rnpm { 
    assets:assets/fonts
}
```
react-native link

Answer 9

在project.json文件中添加

rnpm {
assets:assets/fonts 
}

然后执行react-native link

Answer 10

对于Android：

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

项目folder/android/app/src/main/assets/fonts/font_name.ttf

运行 react-native run-android

使用代码中的字体：

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

Answer 11

对于ios：

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

/assets/fonts

并将您的字体放入其中。

在根文件夹中。添加名为

的文件

react-native.config.js

复制代码并粘贴

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

}

Answer 12

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

假设您想将默认字体更改为“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 13

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

这里有 7 个步骤可以帮助您设置字体：

准备好字体，您可以从 GoogleFonts、AdobeFonts 等下载字体。字体可以是 .ttf 或 .otf
在项目的根目录中为字体创建一个配置文件。创建一个名为：
的文件
反应-native.config.js
创建文件夹来存放您的字体。您可以在 assets 文件夹中创建一个名为 fonts 的文件夹。
将您的 .ttf 或 .otf 字体粘贴到其中。
在react-native.config.js文件里面写一个配置，粘贴如下：

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

将路径更改为存放字体的文件夹的路径。

现在为 Android 和 IOS 设置原生字体。您不需要手动执行此操作，只需在您的终端上运行:

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

Answer 14

请注意 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 15

您可以轻松添加 Google 和自定义字体以通过 Expo-font 反应本机项目。

1-在 React Native 中使用 google 字体：

导入expo-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-在react native中使用自定义字体：

导入expo-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 16

正确的方法

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>
  );
};

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

How to add custom font in react native android

android

react-native

react-native-android

更新：

正确的方法