使用react-native-elements后遇Unrecognized font family Material Design icons错误求助

Hey there! I’ve dealt with this exact error a few times when setting up react-native-elements, so let’s get this sorted out for you. The issue happens because react-native-elements relies on react-native-vector-icons for its icons, and the Material Design fonts aren’t properly linked or configured in your iOS project. Here are the step-by-step fixes:

1. Install the required dependency first #

react-native-elements doesn’t include react-native-vector-icons by default, so you need to install it explicitly:

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

# Or using yarn
yarn add react-native-vector-icons

2. Configure iOS to recognize the fonts #

For React Native 0.60+, auto-linking should handle most of this, but sometimes the font entries don’t make it into your Info.plist. Here’s how to fix that:

• Open your iOS project’s Info.plist file (located at ios/[YourProjectName]/Info.plist).
• Add a new array entry called Fonts provided by application (if it doesn’t already exist).
• Inside this array, add the following items (these cover all fonts from react-native-vector-icons, including the Material Design ones):
  • AntDesign.ttf
  • Entypo.ttf
  • EvilIcons.ttf
  • Feather.ttf
  • FontAwesome.ttf
  • FontAwesome5_Brands.ttf
  • FontAwesome5_Regular.ttf
  • FontAwesome5_Solid.ttf
  • Foundation.ttf
  • Ionicons.ttf
  • MaterialIcons.ttf
  • MaterialCommunityIcons.ttf
  • SimpleLineIcons.ttf
  • Octicons.ttf
  • Zocial.ttf

3. Clean caches and rebuild your project #

Old build caches can often cause font issues, so let’s clear them out:

# Clear npm/yarn cache
npm cache clean --force
# Or for yarn: yarn cache clean

# Navigate to your iOS directory and reset pods
cd ios
pod deintegrate
pod install
cd ..

# Close the simulator completely, then restart your app
react-native run-ios

4. Manual font addition (if auto-linking fails) #

If the above steps don’t work, you can manually add the fonts to Xcode:

• Open your iOS project in Xcode (ios/[YourProjectName].xcworkspace).
• Find the Fonts folder inside node_modules/react-native-vector-icons/.
• Drag all the .ttf files from this folder into your Xcode project (make sure to check "Copy items if needed" and select your project as the target).
• Go to your project’s settings → Build Phases → Copy Bundle Resources, and confirm all the font files are listed here. If any are missing, add them manually.
• Rebuild your project in Xcode or run react-native run-ios again.

Once you’ve gone through these steps, the font error should disappear, and your react-native-elements icons should render correctly.

内容的提问来源于stack exchange，提问作者CuriousAboutThings