React Native中的自定义字体

Question

我尝试在React Native应用中使用自定义字体， 在项目的根目录中创建资产/字体/文件夹，然后在其中放置字体。 创建react-native.config.js并编写，

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

，然后尝试react-native link 它可以在android中工作，但不能在ios中工作

react-native: 0.60.5
npm: 6.11.0
node: 10.16.0

Answer 1

Android将使用字体名称，但在IOS中它将使用“ PostScript名称（请检查可能是问题所在）”。

假设您具有字体“ SFUIDisplayBold.otf”。您已经链接了字体。它可以在Android中使用，但不能在IOS中使用。因为字体的PostScript名称是“ SFUIDisplay-Bold.otf”，所以尽管我们添加了名称为“ SFUIDisplayBold.otf”的字体，但对于IOS，您仍必须使用“ SFUIDisplay-Bold.otf”。 （See Details)

您可以在字体书中看到字体的PostScript名称

Answer 2

自定义字体不会自动捆绑用于IOS。您需要为IOS手动链接它们。

有关详细说明，请访问Custom Fonts in React Native for iOS & Android Builds

最后一步是我完成这项工作的关键。将fontFamily添加到样式中时，请确保使用字体的PostScript名称。

Answer 3

尝试一下，我目前正在使用此方法：

在assets/fonts中复制字体后，将以下行添加到package.json文件中。

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

然后，运行react-native link，如果这样做不起作用，则可能需要通过xcode手动进行。

注意：当我们使用自定义字体时，我们无法分配fontWeight或fontStyle，因为这会禁用自定义字体，并且在添加"rnpm": { "assets": [ "./assets/fonts/" ] }之后 到您的package.json，然后使用react-native link进行链接，刷新模拟器不会显示添加的自定义输出，我们需要使用react-native run-android/ios

重新安装/编译该应用