Unrecognized Font Family on React Native

问题

I'm running into a peculiar error using React Native. Inside my button.js I am doing

import Icon from "react-native-vector-icons/MaterialIcons";
const icon = (Icon name="menu size={20} color="green"/>);
render()
    return(
         {icon}
    )

But I'm given the error

Unrecognized Font Family 'Material Icons'

However when I import FontAwesome as:

import Icon from "react-native-vector-icons/FontAwesome";

I get no error.

回答1:

Make sure you have run the command:

react-native link react-native-vector-icons

回答2:

The library you use has a specific section about this problem, it states (in version 2.0.3):

Make sure you've added the fonts to your XCode project.
Check that the font you are trying to use appears in Info.plist, if you've added the whole folder and it's blue in color, then you need to add it to the path.
Check that the font is copied in the Copy Bundle Resources in Build Phases.
Recompile the project.

回答3:

The same issue was fixed after triggering loadFont() method

import Icon from 'react-native-vector-icons/FontAwesome';

Icon.loadFont();

回答4:

If you have completed all the above steps and still get the same error, you need to Clean your iOS project from Xcode then Build it. This will completely reset the project and ensure that the .ttf file is included.

Run your project from within Xcode and it should now work.

You may still find your project still doesn't work using react-native run-ios. If this is the case, open Finder and navigate to the ios folder in your project and delete the entire build folder. Then close your simulator and package manager terminal, and run react-native run-ios again. This will take a couple of minutes as it's rebuilding everything, but then (hopefully) your app will run correctly.

回答5:

Make sure that you already imported .ttf files to your project.
check in the copy bundle Resources as well.
Finally, add the files in info.plist as in the image Image Link

来源：https://stackoverflow.com/questions/37976756/unrecognized-font-family-on-react-native

标签

javascript

ios

reactjs

fonts

react-native