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

Question

我正在学习react-native,试图创建一些仅用于学习的演示应用程序.我想设置fontFamilyroboto瘦我的工具栏标题.

我在assets/fonts我的android项目的文件夹中添加了roboto thin ttf ,但它似乎在运行应用程序时创建了问题.我在跑步时遇到这个问题

反应原生的开始

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

添加您的字体文件

• 项目文件夹/ android/app/src/main/assets/fonts/font_name.ttf
• 记得重新编译是"react-native run-android"
• 然后你可以在你的风格中使用fontFamily:'font_name'

看这里的字体

Answer 3

更新

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

对于使用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

If you're using React Native chances are that you are using Expo as well. If that's the case, then you can load custom fonts using Expo's Font.loadAsync method.

Steps:

1. Put the downloaded font in the ./assets/fonts directory (if the directory doesn't exist, create it)

2. From the target component (for example: App.js) load Expo's Font module:

   import { Font } from 'expo'
   

3. Load the custom font using componentDidMount:

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

4. Finally, use the style attribute to apply the desired font on a <Text> component:

   <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 中。在样式属性中引用您的字体（例如 McLaren-Regular.ttf）{fontFamily: 'McLaren-Regular'}。如果您使用样式化组件，则font-family: McLaren-Regular

两个平台都不需要链接或旧版构建设置。如果这不起作用（有时对我不起作用），请运行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)