javascript - 如何将谷歌字体添加到 React Native？

Question

我有一个用 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 种无法识别的字体系列“Lobster-Regular”
最后，覆盖以上所有代码，我已经手动下载并添加了 Lobster-Regular 字体，位于项目根目录的 Assets 文件夹中。
它也被添加到:

项目应用/ Assets

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 种无法识别的字体系列“Lobster-Regular”
我想在 iOS 上使用的字体应该怎么做？

Answer 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 版本 < 0.60
您需要告诉 react native 我们的自定义字体所在的位置。在 package.json 中添加以下几行

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

路径可以变化。如果您有“src”文件夹并且您想将 Assets 放在“src”文件夹中，那么路径将是“.src/assets/fonts/”
在终端运行

$ npx react-native link

详细实现请阅读 article