logo标签列表

无法在React Native >= 0.60中链接资源（字体）

react-native
24
react-native: 0.60.4,
react: 16.8.6,
npm: 6.10.1
XCode: 10.2.1
AndroidStudio: 3.4.1

我使用以下命令创建了一个项目:

npx react-native init awesomeApp --template typescript

我将我的资源放在了

assets/fonts/<Bunch of .ttf files>

我的目录结构

awesomeApp
|
+--android
+--ios
+--assets
|  |
|  +---fonts
|      |
|      +-- ProximaNova-Bold.ttf
+--react-native-config.js

然后我运行了react-native link

什么都没有发生， XCode没有显示任何添加的资源，Android也是一样。当我运行react-native run-ios时，会显示找不到字体的错误。

我的react-native-config.js

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

我也尝试过 yarn react-native link 和 npx react-native link

1
这是使用React Native配置文件的一个很好的示例。 - syjsdev
10个回答
33

终于成功连接了字体。

我只是将我的文件react-native-config.js重命名为react-native.config.js，然后它就可以工作了。

我不知道这是否是正确的方法，我只是尝试了一下，对我来说有效。

这里是一个完整的步骤，用于链接自定义字体。

谢谢，我在意识到自己犯了这个错误之前尝试了很长时间。 - Saad
react-native.config.js文件在哪里？我需要它在根目录项目中的地址。 - roz333
它在根目录下。@roz333 - Siraj Alam
10

对于 React Native 版本大于 0.69，npx react-native link 已经不再使用

改用 npx react-native-asset

有没有不使用第三方库的解决方案？ - sushrut619
8

我的react-native.config.js文件

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

和日志：

info Linking assets to ios project                                                                                      
info Linking assets to android project                                                                                  
success Assets have been successfully linked to your project

但我的错误是：

错误的方法：

fontFamily: BYekan

正确的方式：

fontFamily: 'BYekan'

只需在 '' 中输入字体名称

5
不是我想问的问题。 - Siraj Alam
3

补充keyserfaty的答案，这是我的react-native.config.js文件，可通过react-native link实现：

module.exports = {
  dependencies: {
    "react-native-gesture-handler": { platforms: { android: null, ios: null } }
  },
  assets: ['./src/assets/fonts']
};
3
在你的React Native项目中创建一个名为react-native.config.js的文件:
在该文件中，粘贴以下内容:
module.exports = {
    project: {
      ios: {},
      android: {},
    },
    assets: ['./src/assets/fonts/'],
};

assets: ['./src/assets/fonts/']应该是你在项目文件夹中存储自定义字体的路径。 当您运行链接命令时，它应该就可以工作了。

1

将 assets: ['./src/assets/fonts/'] 改为 assets: ['/src/assets/fonts/']

或者使用

assets: ['./src/assets/fonts/']，但是需要在 nameProject/assets 中进行操作。

1
您的回答可以通过添加更多支持性信息来改进。请[编辑]以添加进一步的细节，如引用或文档，以便其他人可以确认您的答案是正确的。您可以在帮助中心中找到有关编写良好答案的更多信息。 - Community
1
没有上述的解决方案适用于我。我的问题是我的Xcode项目已经有了一个名为Resources的组，其中包含一个支持文件夹。根据我的理解，react-native link的工作方式是创建一个没有文件夹的组，并将其添加到您的项目中，并从那里链接到所有字体。当您已经有一个Resources文件夹时，这种方法不起作用。我能想到的解决办法就是将Resources文件夹重命名为其他名称，然后再次运行react-native link。
如果您没有这样的设置，请创建react-native.config.js文件，然后运行react-native link即可。

react-native.config.js

module.exports = {
    project: {
        ios: {},
        android: {},
    },
    assets: ['./src/assets/fonts/']
};
1
使用 RN 0.60.8 和一个名为 react-native-config.js 的文件，应该可以通过 react-native link 来链接字体。
我的日志：
react-native link       
info Linking assets to ios project
info Linking assets to android project
success Assets have been successfully linked to your project

我猜您使用npx安装了React Native，那您可能没有全局安装react-native？运行react-native link是否出现任何错误？

2
不，我得到的日志和你一样，但实际上没有任何东西被链接。 - Siraj Alam
0

有时候你可能会正确地编写react-native.config.js文件

在这种情况下，如果你执行以下任务：

1- 删除react-native.config.js文件

2- 重新创建相同代码的文件

3- 在控制台中输入react-native link

然后你就可以在Xcode中看到资源文件夹了

并且你可以在info.plist和copy bundle resources中看到你的字体

-5

“添加字体”应该在您的package.json文件中完成。请添加：

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

然后运行

react-native link

源代码

编辑：上述方法仅适用于0.60.0以下版本的React Native。

不，您需要查看0.60.x文档，rnpm现已弃用。现在应该使用react-native-config.js。 - Siraj Alam
而且你提供的源代码已经超过2年了。 - Siraj Alam
抱歉，我不知道rnpm在0.60版本中已经无法使用。我在Github上检查了相同的问题，唯一不同的是你的目录末尾缺少“/”，这可能会导致系统读取时混淆。虽然听起来很奇怪，但你尝试添加它并运行react-native link了吗？ - rabbit87
我遇到了一个问题，我已经从iOS和安卓中删除了字体。然后再次使用npx react-native link安装。但是它没有再次链接字体。有人遇到同样的问题吗？ - Rover
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接