如何在React Native版本0.61.5中添加自定义字体？

Question

您可能知道，React Native >='60.0'支持自动链接。有许多教程介绍如何添加自定义字体，但大部分方法已经过时且令人困惑。它们所有的方法仍在使用react native link。

我想知道如何在最新版本的React Native（0.61.5）中添加自定义字体，以使其在iOS和Android上都能正常工作？

我的react-native.config.js如下：

  commands: [...ios.commands, ...android.commands],
  platforms: {
    ios: {
      linkConfig: ios.linkConfig,
      projectConfig: ios.projectConfig,
      dependencyConfig: ios.dependencyConfig,
    },
    android: {
      linkConfig: android.linkConfig,
      projectConfig: android.projectConfig,
      dependencyConfig: android.dependencyConfig,
    },
  },
  /**
   * Used when running RNTester (with React Native from source)
   */
  reactNativePath: '.',
  project: {
    ios: {
      project: './RNTester/RNTesterPods.xcworkspace',
    },
    android: {
      sourceDir: './RNTester',
    },
  },
};

- roz333

Answer 1

你仍然可以运行react-native link :)

这里有一个GitHub帖子，您可以关注这个完全相同的问题。

被接受的步骤是：

1. 在根应用程序中创建文件夹： assets
2. assets文件夹下创建fonts文件夹，并将字体放入此文件夹中
3. 在根目录中创建文件：react-native.config.js（您已经拥有此文件）。在此文件中添加资产引用。

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

4. 运行 npx react-native link

5. 使用字体：style={{ fontFamily: "字体名称" }}

6. 重新运行应用程序：npx react-native run-android

编辑：修正文件名中的打字错误

- LonelyCpp

---

请查看此截图 https://imgur.com/a/NUgck28，像您在截图中看到的那样添加 assets: ['./assets/fonts/'],。react-native.config.js 在此地址中：node_modules\react-native。 - roz333

似乎这种方法在版本“0.61.5”中无效，我按照你说的步骤操作了，但是字体没有任何改变。 - roz333

文件名应该是 react-native.config.js 而不是 react-native-config.js。 - michael_vons

如果在执行以上步骤后没有看到任何更改，请尝试退出应用并运行 npx react-native run-android。 - michael_vons

Answer 2

首先在package.json中的rnpm中添加字体路径， 然后运行react-native link， 最后在Android的Asset文件夹中添加字体。

- user11716837