Vector font not working

问题

I already had run react-native start and then react-native run-ios. So my app is running.

I placed ios-glyphs.ttf into a folder called fonts in my root directory. So ./fonts. I then added to package.json this:

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

}

I then ran react-native link.

After that in my app I added in a rende:

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

On load of my app it is fine, but when i load the page that renders this custom font I get "Unrecognized font family 'ios-glyphs'", here is a screenshot: http://i.imgur.com/G6hwlor.png

The page does load after dismissing that error but the icon looks like a question mark in a box but my real icon is a star:

I then did some funky stuff. I thought I linked it wrong so I changed the folder path, and moved font to new folder and linked again. Then I went into xcode and saw two of them in "Resources" so I deleted the first one as that folder was no longer there.

Does anyone know how to fix this error? Should I throw discard this commit? Will it make it like I never linked anything? I'm worried I might have screwed up my project with xcode.

回答1:

Thanks very much to @sfratini - React-Native can't resolve module for fonts - the font name was actually totally different then file name, as hinted by the tutorial.

How I found the real font name was by following @sfratini's instructions.

I opened up xcode, and opened the ios folder in my project folder with xcode, like this.

I then added to AppDelegate.m this code:

  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);

Then found the new icon name in the console log.

My project folder:

Open with xcode:

Click on the folders, then add to AppDelegate.m the code then save and either run react-native run-ios or press "Play" button as in screenshot below (You need to recompile, I doubt hot reloading will work but I didn't test):

Then a full list of font names get spit out in the console log:

I did the fonts before linking, then after linking, and did a diff to find my font names.

来源：https://stackoverflow.com/questions/43301962/vector-font-not-working

标签

react-native

react-native-ios