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

您输入的爱奥尼亚子是错误的它应该是默认的导入，如下所示

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

基本上，当您完成导入后，将无法定义并抛出错误。

检查`TabBarIcon`的渲染方法

1 个答案: