React Native 无法识别的字体系列未修复

Question

字体位于我的 asset 文件夹中，它们也在 xcode 复制包资源中，也在资源文件夹中。我也已经运行了react-native链接，但它仍然找不到字体。有什么我错过的吗？请参阅附图以供参考：

Answer 1

React Native 部分：

将字体添加到

assets/fonts

项目的根文件夹

的

react-native

react-native-project/
  package.json
  ios/
  android/
  assets/
    fonts/
      GROBOLD...
      ...

将以下代码片段添加到

package.json

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

在您的

react-native

项目中运行以下命令来链接您的资产。

react-native link react-native-vector-icons 

iOS部分：

检查

info.plist

字体文件是否已经添加。

删除派生数据，构建并运行您的 Xcode 项目。

通过导航到

AppDelegate.m

文件来仔细检查添加到项目中的字体，并在下面添加这些代码行

NSURL *jsCodeLocation

;

for (NSString* family in [UIFont familyNames])
{
  NSLog(@"%@", family);
  for (NSString* name in [UIFont fontNamesForFamilyName: family])
  {
    NSLog(@" %@", name);
  }
}

安卓部分：

如果字体文件不存在，请将其复制到。

android/
    app/
      src/
        main/
          assets/
            fonts/
              GROBOLD...

Answer 2

请在下面更新您的代码：

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

您错过了“/”，这就是您的编译器找不到字体文件的原因。

如果您还有任何问题，请告诉我。

Answer 3

'rnpm' 在版本 > 0.60 中已弃用，并将在主要版本中完全删除。

请按照以下步骤开始在您的 React Native 应用程序中使用自定义字体

1. 在根目录下创建

   react-native.config.js

2. 在

   react-native.config.js

   中添加以下代码

   module.exports = {
     assets: ['./assets/fonts']
   };
   

3. 在终端中，运行

   npx react-native link

   命令

4. 为组件添加样式

   e.g. <Text style={styles.titleText}>Home Screen</Text>

5. 将以下属性添加到标题

   titleText: { fontFamily: 'name-of-font-without-ttf-extension'} 

6. 运行您的应用程序

   npx react-native run-android / run-ios

7. 您将看到新字体添加到您的应用程序中。