React Native实现底部导航时TabBarIcon渲染报错如何解决？

原实现代码 #

import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Ionicons from "react-native-vector-icons";

// 页面引入
import Home from "./Home";
import Settings from "./Settings";

const Tab = createBottomTabNavigator();

function MainContainer({ navigation }) {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;

          if (route.name === "Home") {
            iconName = focused
              ? "ios-information-circle"
              : "ios-information-circle-outline";
          } else if (route.name === "Settings") {
            iconName = focused ? "ios-list-box" : "ios-list";
          }

          return <Ionicons name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: "tomato",
        tabBarInactiveTintColor: "gray",
      })}
    >
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Settings" component={Settings} />
    </Tab.Navigator>
  );
}

export default MainContainer;

运行报错信息 #

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `TabBarIcon`.

问题原因 #

Ionicons导入语句写法错误，原导入代码import Ionicons from "react-native-vector-icons";没有指定具体图标库的子路径，导致导入的Ionicons为undefined。

修复方案 #

将Ionicons导入语句替换为正确写法：

import Ionicons from "react-native-vector-icons/Ionicons"

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