矢量字体不起作用答案

【问题标题】：Vector font not working矢量字体不起作用
【发布时间】：2017-04-09 00:59:29
【问题描述】：

我已经运行了react-native start，然后运行了react-native run-ios。所以我的应用正在运行。

我将 ios-glyphs.ttf 放入了我根目录中一个名为 fonts 的文件夹中。所以./fonts。然后我在 package.json 中添加了这个：

 "rnpm": {
    "assets": [
      "fonts"
    ]

}

然后我跑了react-native link。

在那之后，我在我的应用中添加了一个渲染：

 <Text style={{fontFamily:'ios-glyphs'}}>&#xf193;</Text>

在加载我的应用时它很好，但是当我加载呈现此自定义字体的页面时，我得到“无法识别的字体系列'ios-glyphs'”，这是一个屏幕截图：http://i.imgur.com/G6hwlor.png

在消除该错误后页面确实会加载，但图标看起来像框中的问号，但我的真正图标是星号：

然后我做了一些时髦的东西。我以为我链接错了，所以我更改了文件夹路径，并将字体移动到新文件夹并再次链接。然后我进入 xcode 并在“资源”中看到其中两个，因此我删除了第一个，因为该文件夹不再存在。

有谁知道如何解决这个错误？我应该丢弃这个提交吗？会不会像我从来没有链接过任何东西一样？我担心我可能用 xcode 搞砸了我的项目。

【问题讨论】：

标签： react-native react-native-ios

【解决方案1】：

非常感谢@sfratini - React-Native can't resolve module for fonts - 正如教程所暗示的，字体名称实际上与文件名完全不同。

我是按照@sfratini 的说明找到真正的字体名称的。

我打开xcode，用xcode打开我项目文件夹下的ios文件夹，像这样。

然后我将这段代码添加到 AppDelegate.m：

  NSArray *families = [[UIFont familyNames] sortedArrayUsingSelector:@selector(localizedCaseInsensitiveCompare:)];
  NSMutableString *fonts = [NSMutableString string];
  for (int i = 0; i < [families count]; i++) {
    [fonts appendString:[NSString stringWithFormat:@"\n%@:\n", families[i]]];
    NSArray *names = [UIFont fontNamesForFamilyName:families[i]];
    for (int j = 0; j < [names count]; j++) {
      [fonts appendString:[NSString stringWithFormat:@"\t%@\n", names[j]]];
    }
  }
  NSLog(@"%@", fonts);

然后在控制台日志中找到了新的图标名称。

我的项目文件夹：

用xcode打开：

单击文件夹，然后将代码添加到 AppDelegate.m，然后保存并运行react-native run-ios 或按下“播放”按钮，如下面的屏幕截图所示（您需要重新编译，我怀疑热重载会起作用，但我没有t 检验）：

然后在控制台日志中会显示完整的字体名称列表：

我在链接之前做了字体，然后在链接之后做了一个差异来找到我的字体名称。

【讨论】：