在 React Native V 60+ 中渲染 Open-sans 字体时出现问题答案

【问题标题】：Problem when rendering Open-sans font in React Native V 60+在 React Native V 60+ 中渲染 Open-sans 字体时出现问题
【发布时间】：2020-02-18 17:36:40
【问题描述】：

我想在我的应用程序中添加“Open-sans”字体，但我有一个问题，它只发生在 IOS 模拟器上

这是我的步骤：

a) 我在根应用程序中创建了一个文件夹：assets 然后 fonts fonts 文件夹在 assets 中，并放入 Open-sans.ttf

b) 我在根目录下创建了一个名为 react-native-config.js 的文件并添加：

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

c) 反应原生链接

d) 在 App.js 中

<Text style={{fontFamily: 'OpenSans-Bold', fontWeight: 'bold'}}>
  This is my first App
</Text>

我的问题是，每当我在 App.js 中进行任何编辑时，它都会告诉我“无法识别的字体系列”

但是当我打开 react-native-config.js 并且只保存触发的热重载和字体工作时什么都不做

正如我提到的，它在 Android 上是完美的，但是在对 App.js 文件进行任何编辑后保存时，错误出现在 IOS 上

【问题讨论】：

标签： react-native fonts react-native-ios

【解决方案1】：

对于 IOS，font-family 的值是 fullname，对于 android，它的文件名。试试：

<Text style={{fontFamily: 'Open Sans Bold'}}>

这是我的第一个应用程序

对于 android，将文件名“OpenSans-Bold.ttf”更改为“Open Sans Bold.ttf”

【讨论】：

【解决方案2】：

我遇到了同样的错误，所以我就是这样做的： 1 - 将 react-native-config.js 重命名为 react-native.config.js 并将此脚本放在文件中：

module.exports = {
  assets: ['./src/assets/fonts'], // this is my path
};

2 - 把它放在我的 package.json 中：

rnpm": {
    "ios": {},
    "android": {},
    "assets": [
      "./src/assets/font"// this is my path
    ]
  },

在我运行 react-native link && yarn react-native link 之后。

检查您的 info-plist 和您的 android 资产是否已更改

【讨论】：

【解决方案3】：

根据您的描述，您只将 Open-sans.ttf 放在资产文件夹中。但是您正在尝试访问未添加到资产文件夹中的 OpenSans-Bold。要访问任何特定字体，您需要将该字体添加到资产文件夹中。这是一个供您参考的示例...

您也可以查看this 以获得更好的理解

【讨论】：

【解决方案4】：

很简单...

要嵌入字体，请将代码复制到您的 html 中：

<link>@import
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">

指定族的 CSS 规则

font-family: 'Open Sans', sans-serif;

【讨论】：

你没看到他正在使用 React Native 构建移动应用吗？