MaterialCommunityIcons 在本机底部选项卡导航器中显示不正确的图标

Question

我正在遵循 https://reactnavigation.org/docs/bottom-tab-navigator/

的指南

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Feed"
      screenOptions={{
        tabBarActiveTintColor: '#e91e63',
      }}
    >
      <Tab.Screen
        name="Feed"
        component={Feed}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color, size }) => 
            <MaterialCommunityIcons name="home" color={color} size={size} />
        }}
      />
      <Tab.Screen
        name="Notifications"
        component={Notifications}
        options={{
          tabBarLabel: 'Updates',
          tabBarIcon: ({ color, size }) =>
            <MaterialCommunityIcons name="bell" color={color} size={size} />
        }}
      />
      
    </Tab.Navigator>
  );
}

一切正常，除了显示错误的图标。 “家”图标显示悲伤的表情符号，“铃铛”图标显示带有汗水的悲伤表情符号。 我试图在

name="" 

图标中更改

<MaterialCommunityIcons>

，它都显示了名称所建议的不同图标。 出现的图标也是彩色的，所以我怀疑它可能根本没有渲染 MaterialCommunityIcons。

有人可以建议可能出了什么问题吗？ 谢谢

Answer 1

要解决问题，请按照以下步骤

1. 在 android/app/src/main/assets 中创建名为 font 的文件夹
2. 复制 node_modules 中的所有字体 eact-native-vector-icons\Fonts
3. 粘贴到上面创建的文件夹（android/app/src/main/assets/fonts）

希望它能解决问题。

Answer 2

我在安卓上遇到了同样的问题。

1. 我只是跟着android安装 https://github.com/oblador/react-native-vector-icons#android

2. 在我的例子中，我必须忽略应该在 android/app/src/main/java/...MainApplication.java 中执行的这一步

导入 com.oblador.vectoricons.VectorIconsPackage;

新的 VectorIconsPackage()

（它给了我一个错误）

3. 再次构建 APK。

就是这样。它对我有用。

Answer 3

我遇到了类似的问题，我所做的是将以下内容添加到我的

android/app/build.gradle

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

然后我再次运行

react-native run-android

，我的问题就解决了。 另请查看有关 react-native-vector-icons. 的

npm 文档