如何向 React Native 添加 google 字体？

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文件夹中。它也被添加在：

项目应用/资产
android/app/src/main/assets/fonts
在iOS也是在projectApp/Resources

我创建了一个名为 react-native.config.js 的文件，我在其中添加了以下内容和运行 react-native link： ()

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”文件夹并且你想将资产放在“src”文件夹中，那么路径将为“.src/assets/fonts/”

运行在终端

$ npx react-native link

有关实施的详细信息，请阅读 article

如何向 React Native 添加 google 字体？

How to add google fonts to React Native?

javascript

reactjs

react-native

google-fonts