检查 `TabBarIcon` 的渲染方法

Question

我想在底部标签导航中添加图标并面临上述错误。 如果我使用没有图标的代码，那么一切都很好，我的意思是标签栏可以正常工作。

完全错误是： 元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查TabBarIcon的渲染方法。

我的代码是

import React, { Component } from 'react';
import {StyleSheet, View, Text,} from 'react-native';
import {NavigationContainer, StackActions} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {Ionicons} from 'react-native-vector-icons/Ionicons';
import Home from './Pages/Home';
import Category from './Pages/Category';
const Tab = createBottomTabNavigator();
export default function App(){
  return(
    <NavigationContainer>
      <Tab.Navigator initialRouteName="Home"
      screenOptions={ props=> ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;
          if(props.route.name === "Home"){
            iconName = focused
            ? "ios-information-circle"
            : "ios-information-circle-outline";
          }
          if(props.route.name === "Category"){
            iconName = focused
            ? "ios-information-circle"
            : "ios-information-circle-outline";
          }
          return <Ionicons name={iconName} color={color} size={size} />;},}) }>
<Tab.Screen 
      name="Home" component={Home}></Tab.Screen>
      <Tab.Screen name="Category" component={Category}></Tab.Screen>
      </Tab.Navigator>
    </NavigationContainer>
)}

Answer 1

您的 Ionicons 导入错误 它应该是如下所示的默认导入

import Ionicons from 'react-native-vector-icons/Ionicons';

基本上，当您像以前那样导入时，它将是未定义的并引发错误。