检查 `TabBarIcon` 的渲染方法

Question

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

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

检查 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';

基本上，当你像你所做的那样导入时，它会是未定义的并抛出错误。

检查 `TabBarIcon` 的渲染方法

Check the render method of `TabBarIcon`

react-native

react-navigation

react-navigation-bottom-tab