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

Question

想换个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"
}

Answer 1

我认为你有一个错字。

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