react-native-vector-icons，TabBarItem 元素类型无效

Posted 2023-02-19

【中文标题】react-native-vector-icons，TabBarItem 元素类型无效

【英文标题】：react-native-vector-icons, TabBarItem Element type is invalid

【发布时间】：2017-10-16 07:34:36

【问题描述】：

想换个TabBarios的图标，写了如下代码，却变成Element type is invalid的错误。

import React from 'react';
import  View, TabBarIOS  from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import CommunicationTab from './components/communication_tab';
import WhereaboutsTab from './components/whereabouts_tab';

export default class App extends React.Component 

  constructor() 
    super();
    this.state = 
      selectedTab: 'WhereaboutsTab',
    ;
  

  render() 
    return (
      <TabBarIOS selectedTab=this.state.selectedTab>
        <Icon.TabBarItem
          title="whereabouts"
          iconName='ios-home-outline'
          selectedIconName='ios-home'
          selected=this.state.selectedTab === 'WhereaboutsTab'
          onPress=() => 
            this.setState(
              selectedTab: 'WhereaboutsTab'
            );
          
        >
          <WhereaboutsTab />
        </Icon.TabBarItem>
        <Icon.TabBarItem
          title="communication"
          iconName='ios-settings-outline'
          selectedIconName='ios-settings'
          selected=this.state.selectedTab === 'CommunicationTab'
          onPress=() => 
            this.setState(
              selectedTab: 'CommunicationTab'
            );
          
        >
          <CommunicationTab />
        </Icon.TabBarItem>
      </TabBarIOS>
    );
  

使用以下代码时，没有任何问题。

<Icon name="ios-home" />

这是我在create-react-native-app里做的一个expo项目，会不会有关系？

package.json

"dependencies": 
    "expo": "^16.0.0",
    "moment": "^2.18.1",
    "react": "16.0.0-alpha.6",
    "react-native": "^0.43.4",
    "react-native-action-button": "^2.6.9",
    "react-native-md-textinput": "^2.0.4",
    "react-native-modal-datetime-picker": "^4.6.0",
    "react-native-swipeout": "^2.1.1",
    "react-native-vector-icons": "^4.1.1"

【问题讨论】：

你有办法解决这个问题吗？我也遇到了同样的问题。

【参考方案1】：

我认为你有一个错字。

尝试将Icon.TabBarItem 替换为Icon.TabBarItemIOS。

【讨论】：

谢谢。但结果是一样的。

您是否尝试删除<WhereaboutsTab /> 和<CommunicationTab /> 看看它们是否是错误的原因？

即使我使用 'Text' 而不是 'WhereaboutsTab' 也是一样。