Font Awesome 在我的本机项目中无法识别

Question

I have react-native elements installed in my app but I keep getting this error that says Unrecognized Font family Awesome.

I've reset my cache, did npm install, and removed the build folder and re added it. Nothing seems to work, any ideas?

The app should run with no errors. Before I used to get a "cfbundleidentifier does not exist" error but when I thought i had fixed it. I got this unrecognized fontfamily error.

Answer 1

it's most probably because it can't locate the icons, so you'll need to do

npm install react-native-vector-icons --save

and then link it

react-native link react-native-vector-icons

Answer 2

So, after hours of researching, I found the solution. The probleme with Fontawesome or WHATEVER font we want to add on RN V0.6> is that the fonts from "react-native- vector-icons" are not linked well from the node_modules folder. This is what I did:

• Create a folder "assets/fonts" on the RN root project

• Copy the ttf files on the created folder and, HERE IS THE BUG, the name of the files has to be "lowercase.ttf" or "lowercase_whatever_also_lowercase.ttf". If you put Uppercases or "-" it will crash. don't know why.

• Create a file "react-native.config.js" on the RN root project and paste the following:

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

And finnally execute the follwing on the terminal:

react-native start --reset-cache
react-native link
npm run ios

I tested for IOS and it solved. The exhausting matter was the UPPERCASE question that I could not imagine.

Answer 3

You have to follow some steps to add fonts to your project, check each step.

1. Add the font folder into your project on the path

   AppName/android/assets/fonts/

   AppName/ios/assets/fonts/

2. Link your font with project. for this,

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

Add this line to your project's package.json and run,

react-native link

3. App should be rebuilt for the font to be recognized:

   react-native run-ios

   react-native run-android

if you don't know the exact name of font, you can add the code in AppDelegate.m inside the function,

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
...


  NSArray *fontFamilies = [UIFont familyNames];

  for (int i = 0; i < [fontFamilies count]; i++)
  {
    NSString *fontFamily = [fontFamilies objectAtIndex:i];
    NSArray *fontNames = [UIFont fontNamesForFamilyName:[fontFamilies objectAtIndex:i]];
    NSLog (@"%@: %@", fontFamily, fontNames);
  }

}

then check the log for exact name of font.

And add the font name to your project,

fontFamily: 'fontName'