更新到 Expo 40 后，BottomTabNavigator 上没有图标答案

【问题标题】：no icon on BottomTabNavigator after updating to Expo 40更新到 Expo 40 后，BottomTabNavigator 上没有图标
【发布时间】：2021-05-07 22:57:15
【问题描述】：

在将 expo 从 37 版更新到 40 版后，我不再看到图标，它们不知何故是不可见的。

我发现了具有类似问题的主题，但没有一个解决方案适合我。我读到我需要用 defaultNavigationOptions 替换 navigationOptions 但这并没有解决问题。

有人知道我该如何解决这个问题吗？

const tabNavigator = TabNavigator.createStyles();

export default createBottomTabNavigator(
  {
    Overview: {
      resetOnBlur: true,
      screen: OverviewStack,
      navigationOptions: {
        title: "Home",
      },
    }, 

    Settings: {
      screen: SettingsStack,
      resetOnBlur: true,
      navigationOptions: {
        title: "Settings",
      },
    },

  },
  {
    tabBarOptions: {
      showLabel: true,
      labelStyle: {},
      hidden: true,
      activeBackgroundColor: Colors.navigationBkgdActive,
      activeTintColor: Colors.navigationColorActive,
      inactiveBackgroundColor: Colors.navigationBkgd,
      inactiveTintColor: Colors.navigationColor,
      backgroundColor: Colors.navigationColor,
      labelBottomStyle: {
        fontSize: Fonts.bodyFontSizeSmall,
      },
      style: {
        backgroundColor: Colors.navigationBkgd,
        height: 64,
      },
      indicatorStyle: {
        backgroundColor: "transparent",
      },
    },
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused }) => {
        const icons = {
          Overview: "home-outline",
          Settings: "settings",

        };

        const style = focused ? tabNavigator.activeTab : {};

        return (
          <View style={tabNavigator.container}>
            <View style={style} />
                <Icon
                style={[
                  tabNavigator.icon,
                  { color: focused ? "#D97D54" : "lightgray" },
                ]}
                size={28}
                name={icons[navigation.state.key]}
              />
          </View>
        );
      },
      showIcon: true,
    }),
  }
);

【问题讨论】：

标签： reactjs react-native expo jsx

【解决方案1】：

我遇到了与图标类似的问题，与设置图标相关的地雷。我看不到你的 import 语句，但这是我最后所做的。

之前在 EXPO 38 SDK 上工作，但在 EXPO 42 SDK 上没有：

// Import Statements...
import { MaterialCommunityIcons } from '@expo/vector-icons';

// Further down in TabNavigator code...
<MaterialCommunityIcons name="settings" size={28} color={tintColor} />

升级到 EXPO 42 SDK 后：

// Import Statements...
import { MaterialCommunityIcons } from '@expo/vector-icons';

// Further down in TabNavigator code...
<MaterialCommunityIcons name="account-settings" size={28} color={tintColor} />

根据Material Icons 的列表，“settings”似乎已重命名为“cog”，但我想将我的更改为更像“account-cog”，所以我强烈建议您查看并确定您想要的图标，因为它们可能已被重命名。

【讨论】：