如何将谷歌字体添加到 React Native？答案

【问题标题】：How to add google fonts to React Native?如何将谷歌字体添加到 React Native？
【发布时间】：2021-11-19 08:24:51
【问题描述】：

我有一个使用 npx react-native init myProject 创建的项目，我想向其中添加外部 Google 资源，在本例中为 Lobster-regular。

首先，按照教程通过终端"@ expo-google-fonts/lato" and "@expo-google-fonts/oswald" 安装。在 App.js 文件中执行导入：

import {
  useFonts as useOswald,
  Oswald_400 Regular,
} from '@ expo-google-fonts / oswald'

import {
  useFonts as useLato,
  Lato_400Regular,
} from '@ expo-google-fonts / lato'

并创建这些常量：

const [oswaldLoaded] = useOswald ({
  Oswald_400 Regular,
})

const [latoLoaded] = useLato ({
  Lato_400Regular,
})

if (! oswaldLoaded ||! latoLoaded) {
  return null;
}

我有一个文件，其中包含我的个人风格，我在其中调用字体、颜色、字体大小等：

export const fonts = {
  body: "Oswald_400Regular",
  heading: "Lobster-Regular",
  monospace: "Oswald_400Regular",
}

这一切都没有奏效。

ExceptionsManager.js: 180 Unrecognized font family 'Lobster-Regular'

最后，覆盖以上所有代码，我已经手动下载并添加了 Lobster-Regular 字体，在项目根目录的 assets 文件夹中。它也被添加在：

projectApp / 资产
android/app/src/main/assets/fonts
在 iOS 中它也在 projectApp / Resources 中

我创建了一个名为 react-native.config.js 的文件，在其中添加了以下内容并运行了 react-native 链接： (How to add custom fonts to react-native v0.61.x?)

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

但是，当我从文件中调用源时，这仅适用于 Android

font-family: $ {(props) => props.theme.fonts.heading}

ExceptionsManager.js: 180 Unrecognized font family 'Lobster-Regular'

对于想要在 iOS 上使用的字体，我应该怎么做？

【问题讨论】：

您似乎没有实际安装 Lobster-Regular。您刚刚安装了 oswald 和 lato。
“最后，覆盖以上所有代码，我已经手动下载并添加了 Lobster-Regular 字体”。这句话让我很困扰。您是说您显示的代码不是实际使用的代码吗？当您应该能够以与安装 oswald 和 lato 相同的方式安装字体时，为什么还要手动下载字体？
我认为this 应该可以解决问题。告诉我。
绅士，我这样说是为了展示我使用过的所有替代品，并可以提供想法@EmilKarlsson
mehrankhandev.medium.com/…

标签： javascript reactjs react-native google-fonts

【解决方案1】：

如果 React Native 版本 ≥ 0.60

创建文件react-native.config.js并添加以下代码

module.exports = {
  project: {
    ios: {},
    android: {}, // grouped into "project"
  },
  assets: ["./assets/fonts/"], // stays the same
};

如果 React Native 版本

你需要告诉 react native 我们自定义字体的位置。在您的 package.json 中添加以下行

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

路径可能不同。如果你有“src”文件夹并且你想把资产放在“src”文件夹中，那么路径将是“.src/assets/fonts/”

在终端中运行

$ npx react-native link

具体实现请阅读article

【讨论】：