React Native中MaterialCommunityIcons显示为问号的问题求助

刚接触React Native，使用react-native-vector-icons/MaterialCommunityIcons时遇到问题：已安装必要依赖包，但所有图标均显示为问号，不过修改图标颜色和大小的功能正常。

代码示例 #

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Settings from './Settings';
import Exercises from './Exercises';
import Home from './Home';
import Stats from './Stats';
import Workout from './Workout';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'

const Tab = createBottomTabNavigator();

function Tabs (){
    return(
        <Tab.Navigator
        screenOptions={({ route }) => ({
            tabBarIcon: () => {
              const icons: Record<string, string> = {
                Home: "home",
                Stats: "chart-bar",
                Workout: "dumbbell",
                Exercises: "weight-lifter",
                Settings: "cog",
              };
        
              return (
                <MaterialCommunityIcons
                  name={icons[route.name]}
                  color= "black"
                  size={24}
                />
              );
            },
          })}
        >
            <Tab.Screen name="Home" component={Home} />
            <Tab.Screen name="Stats" component={Stats} />
            <Tab.Screen name="Workout" component={Workout} />
            <Tab.Screen name="Exercises" component={Exercises} />
            <Tab.Screen name="Settings" component={Settings} />
        </Tab.Navigator>
    )
}
export default Tabs;

问题截图 #

解决方法（iOS平台） #

以下是针对iOS平台的配置步骤，可解决图标显示为问号的问题：

• 进入项目的iOS目录，执行pod install确保依赖包安装完整。
• 打开Xcode项目，切换到Build Phases标签页，找到Copy Bundle Resources选项。
• 点击列表下方的+按钮，在弹出的文件选择窗口中，找到node_modules/react-native-vector-icons/Fonts目录下的MaterialCommunityIcons.ttf文件并添加进去。
• 打开项目的Info.plist文件，添加如下配置：

  <key>UIAppFonts</key>
  <array>
    <string>MaterialCommunityIcons.ttf</string>
  </array>
  

• 清理Xcode的构建缓存（点击菜单栏Product -> Clean Build Folder），之后重新运行项目即可。

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