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

Question

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

Answer 1

嗯， 最后，我链接了我的字体，

我刚刚将文件

react-native-config.js

重命名为

react-native.config.js

并且成功了。

我不知道这是否是正确的方法，我只是尝试过，它有效，至少对我来说。

这是链接自定义字体的完整演练。

Answer 2

对于 React-native > 0.69，

npx react-native link

不再工作

使用

npx react-native-asset

代替

Answer 3

我的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'

只需将字体名称放入''

Answer 4

在您的 React Native 项目中创建一个名为

react-native.config.js

:

的文件

在其中粘贴

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

assets: ['./src/assets/fonts/'],

应该是您在项目文件夹中存储自定义字体的路径。 当您运行链接命令时，它应该可以工作。

对于 React-native > 0.69，

npx react-native link

不再工作

使用

npx react-native-asset

代替

Answer 5

为了补充keyserfaty的答案，这是我使用react-native链接工作的react-native.config.js：

module.exports = {
  dependencies: {
    "react-native-gesture-handler": { platforms: { android: null, ios: null } }
  },
  assets: ['./src/assets/fonts']
};

Answer 6

将 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

是否给您带来任何错误？

Answer 7

以上解决方案都不适合我。我遇到的问题是我的 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/']
};

Answer 8

将资产：['./src/assets/fonts/']更改为资产：['/src/assets/fonts/']

或使用

资产：['./src/assets/fonts/'] 但名称Project/assets

Answer 9

有时你正确地编写了react-native.config.js

在这种情况下；如果你做这个任务

对你有帮助

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

2-再次使用相同的代码创建此文件

3-在控制台中写入react-native链接

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

您可以在 info.plist 中看到您的字体并复制捆绑资源

Answer 10

“添加字体”应该在 package.json 中完成。添加：

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

然后运行

react-native link

来源

编辑：以上仅适用于低于0.60.0的react-native