React Native项目安装底部导航依赖后Vector Icons仅显示问号求助

我有一个React Native项目，此前已成功安装矢量图标所需字体并正常使用react-native-vector-icons。但在安装底部标签导航栏相关依赖后，应用中的图标突然无法显示，仅呈现问号。

我已在Xcode工作区的Info.plist中声明了所需字体，配置如下：

<key>UIAppFonts</key>
<array>
    <string>AntDesign.ttf</string>
    <string>Entypo.ttf</string>
    <string>EvilIcons.ttf</string>
    <string>Feather.ttf</string>
    <string>FontAwesome.ttf</string>
    <string>FontAwesome5_Brands.ttf</string>
    <string>FontAwesome5_Regular.ttf</string>
    <string>FontAwesome5_Solid.ttf</string>
    <string>FontAwesome6_Brands.ttf</string>
    <string>FontAwesome6_Regular.ttf</string>
    <string>FontAwesome6_Solid.ttf</string>
    <string>Fontisto.ttf</string>
    <string>Foundation.ttf</string>
    <string>Ionicons.ttf</string>
    <string>MaterialCommunityIcons.ttf</string>
    <string>MaterialIcons.ttf</string>
    <string>Octicons.ttf</string>
    <string>SimpleLineIcons.ttf</string>
    <string>Zocial.ttf</string>
</array>

以下是我的package.json文件：

{
  "name": "ReactNativeDemo",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-community/slider": "^4.4.3",
    "@react-navigation/bottom-tabs": "^6.5.11",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/native-stack": "^6.9.17",
    "@react-navigation/stack": "^6.3.20",
    "react": "18.2.0",
    "react-native": "0.72.5",
    "react-native-gesture-handler": "^2.14.0",
    "react-native-reanimated": "^3.5.4",
    "react-native-safe-area-context": "^4.7.4",
    "react-native-screens": "^3.27.0",
    "react-native-vector-icons": "^10.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.11",
    "@tsconfig/react-native": "^3.0.0",
    "@types/react": "^18.0.24",
    "@types/react-native-vector-icons": "^6.4.18",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.76.8",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },
  "engines": {
    "node": ">=16"
  }
}

解决办法 #

• 重新链接字体资源：执行npx react-native link react-native-vector-icons，之后清理Xcode缓存并重启项目。
• 检查Build Phase配置：打开Xcode项目，进入Build Phases -> Copy Bundle Resources，确认所有声明的字体文件已添加；若未添加，手动导入node_modules/react-native-vector-icons/Fonts下的对应字体文件。
• 清理构建缓存：
  • 执行watchman watch-del-all
  • 删除node_modules和package-lock.json，重新执行npm install
  • 在Xcode中按下Cmd+Shift+K清理构建文件夹，再重新构建项目
• 检查图标使用逻辑：确保底部导航中图标调用方式正确，示例代码：

  import Ionicons from 'react-native-vector-icons/Ionicons';
  
  // BottomTabs配置示例
  screenOptions={({ route }) => ({
    tabBarIcon: ({ focused, color, size }) => {
      let iconName = route.name === 'Home' ? (focused ? 'home' : 'home-outline') : 'settings';
      return <Ionicons name={iconName} size={size} color={color} />;
    },
  })}
  

• 验证字体文件完整性：检查node_modules/react-native-vector-icons/Fonts下是否有缺失字体，若有则重新安装图标库：npm uninstall react-native-vector-icons && npm install react-native-vector-icons

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