React native 本地反应:看不到FontAwesome或任何其他expo/vector图标

React native 本地反应:看不到FontAwesome或任何其他expo/vector图标,react-native,expo,React Native,Expo,我正面临着一些图标方面的问题。(我试过MaterialCommunityIcons和普通图标,但结果相同) 它们不会出现在底部选项卡导航中,也不会出现在社交网络下。(其他图标来自“反应本机设置”页面) 以下是一个屏幕截图: 以下是选项卡导航: import React from 'react'; import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; import { Materia

我正面临着一些图标方面的问题。(我试过MaterialCommunityIcons和普通图标,但结果相同)

它们不会出现在底部选项卡导航中,也不会出现在社交网络下。(其他图标来自“反应本机设置”页面)

以下是一个屏幕截图:

以下是选项卡导航:

import React from 'react';
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { MaterialCommunityIcons } from '@expo/vector-icons';
import HomeNavigator from '../navigation/HomeNavigator';
import NewsNavigator from '../navigation/NewsNavigator';
import settings from '../config/settings';
import i18n from "../locales/i18n";

const Tab = createBottomTabNavigator();

function TabNavigation(props) {
    return (
        <Tab.Navigator
          screenOptions={({ route }) => ({
            tabBarIcon: ({ color }) => {
                let iconName;
                if (route.name === 'Home') {
                    iconName = 'home';
                }
                else if (route.name === 'News') {
                    iconName = 'newspaper';
                }
                // You can return any component that you like here!
                return <MaterialCommunityIcons color={color} icon={iconName} size={25} />;
            },
        })}
        tabBarOptions={{
            activeTintColor: settings.colors.activecolor,
            inactiveTintColor: settings.colors.fontcolor,
            activeBackgroundColor: settings.colors.navigation,
            inactiveBackgroundColor:settings.colors.navigation,
        }}
        >
          <Tab.Screen name="Home" options={{ tabBarLabel: i18n.t('navigation.home')  }} component={HomeNavigator} />
          <Tab.Screen name="News" options={{ tabBarLabel: i18n.t('navigation.news')  }} component={NewsNavigator} />
        </Tab.Navigator>
      );
}

export default TabNavigation;

您正在使用tabBarIcon作为导航器的一部分,这应该传递到屏幕级别的选项,如下所示

  <Tab.Screen
    name="Home"
    options={{
      tabBarLabel: i18n.t('navigation.home'),
      tabBarIcon: ({ color }) => (
        <MaterialCommunityIcons name="home" color={color} size={20} />
      ),
    }}
    component={HomeNavigator}
  />
  <Tab.Screen
    name="News"
    options={{
      tabBarLabel: i18n.t('navigation.news'),
      tabBarIcon: ({ color }) => (
        <MaterialCommunityIcons name="newspaper" color={color} size={20} />
      ),
    }}
    component={NewsNavigator}
  />
(
),
}}
组件={HomeNavigator}
/>
(
),
}}
组件={NewsNavigator}
/>

我认为这不是问题所在。在我的另一个应用程序中,它正在工作。我从官方文档中找到了这个解决方案:您可以登录控制台并查看iconName和route.name吗?并尝试这种方法。它显示了正确的图标和路线。它还会更改活动选项卡的颜色。我把一个图标放在另一个屏幕上进行测试,它也不可见。奇怪,因为我在我的另一个应用程序中使用了相同的lib@expo/vector图标。您是否在控制台中记录或调试并检查这些值?我想不出它不起作用的原因我做了控制台日志。我还尝试了删除的node_模块和npm安装,我的屏幕上没有任何变化:(
  <Tab.Screen
    name="Home"
    options={{
      tabBarLabel: i18n.t('navigation.home'),
      tabBarIcon: ({ color }) => (
        <MaterialCommunityIcons name="home" color={color} size={20} />
      ),
    }}
    component={HomeNavigator}
  />
  <Tab.Screen
    name="News"
    options={{
      tabBarLabel: i18n.t('navigation.news'),
      tabBarIcon: ({ color }) => (
        <MaterialCommunityIcons name="newspaper" color={color} size={20} />
      ),
    }}
    component={NewsNavigator}
  />