无法在 react 本机中链接资产(字体>= 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

对于 0.69 的 React-native>，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

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

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

Answer 5

在你的 react 原生项目中创建一个名为 react-native.config.js 的文件：

在其中，粘贴

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

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/']

或使用

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

Answer 9

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

在这种情况下;如果你执行此任务

它可以帮助你

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

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

3-在控制台中编写反应本机链接

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

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

Answer 10

"添加字体"应该在你的package.json中完成。加：

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

然后运行

react-native link

源

编辑：以上仅适用于低于0.60.0的本机