Question

我正在学习react-native，尝试创建一些仅用于学习的演示应用。我想将fontFamily设置为roboto thin我的工具栏标题。

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

时遇到了这个问题

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

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

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

点击此处查看更多示例Custom Font Examples

Answer 3

更新

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

对于使用本机版本> 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 4

如果你正在使用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>

Answer 5

更新：

从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 6

添加project.json文件

rnpm {
assets:assets/fonts 
}

然后执行本机链接

Answer 7

@ nitin-anand的答案是最合适的，而且比其他方法更干净，但是现在不赞成使用该方法，现在我们必须在根目录中创建一个react-native.config.js文件，并使用以下配置作为示例：< / p>

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

Answer 8

使用EXPO添加自定义字体

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

步骤

将字体移动到Asset / fonts文件夹
从目标组件（例如：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})
}

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

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

享受编码。...

我的输出：

Answer 9

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

Answer 10

在 Project.json 中设置：

rnpm {
assets:assets/fonts 
}

然后执行反应本机链接。

Answer 11

对于ios：

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

/资产/字体

并在其中放置字体。

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

的文件

react-native.config.js

复制代码并粘贴

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

}

Answer 12

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

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

TYPESCRIPT：

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

对于Android：

将自定义字体放入以下文件夹：

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

运行react-native run-android

在代码中使用字体：

title：{fontSize：20，fontFamily：“ font Name”}，

如何在本机android中添加自定义字体

13 个答案:

更新：