时间戳

首页 > 解决方案 > 在 5.x 版本中添加 TabBarNavigation 时出错

javascript - 在 5.x 版本中添加 TabBarNavigation 时出错

问题描述

这是代码。在这里我想创建 BottomTabs，我使用了 react native 版本 5.x npm 包。如果我删除标签栏，它将起作用。

import { Ionicons, AntDesign } from 'react-native-vector-icons';

<Tab.Navigator
  initialRouteName="Home"
  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';
        }
        // You can return any component that you like here!
        return <Ionicons name={iconName} size={size} color={color} />;
      };
    },
  )}
  tabBarOptions={{
    activeTintColor: 'tomato',
    inactiveTintColor: 'gray',
  }}>
  <Tab.Screen name="Home" component={Home} />
  <Tab.Screen name="Search" component={search} />
</Tab.Navigator>

错误包括在下面 错误

标签： javascriptreactjsreact-native

解决方案

正如您在评论中提到的，您正在导入图标组件，如下所示：

import { AntDesign, Ionicons } from 'react-native-vector-icons';

vector-icons 包导出这些组件的方式略有不同。将您的导入语句更改为以下内容：

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

推荐阅读