javascript - 尝试使用自定义图标创建 TabBarIOS 时发生不变冲突错误

Question

我在这里主要想完成的是合并这两个教程 (x) (x)为了创建一个具有自定义图标的简单 TabBar。我正在尝试使用 react-native-vector-icons 库中的图标，我已将其添加到我的节点模块中。但是，我遇到了一个障碍:

Invariant Violation: Element type is invalid: expected a string (for built-in >components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of ProfileTabs.

This error is located at: in RCTTabBar (at TabBarIOS.ios.js:82)

in TabBarIOS (at App.js:19)

in ProfileTabs (at App.js:80)

in ProfileApp (at registerRootComponent.js:35)

in RootErrorBoundary (at registerRootComponent.js:34)

等这是相关代码:

import React, { Component } from 'react';
import { AppRegistry, Image, StyleSheet, TabBarIOS, Text, View } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

var Profile = require('./profile');
var Repositories = require('./repositories');
var Following = require('./following');
var Followers = require('./followers');

class ProfileTabs extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'profile'
        };
    }
    render() {
        return (
            <TabBarIOS
                selectedTab={this.state.selectedTab}>
                <Icon.TabBarIOS
                    selected={this.state.selectedTab === 'profile'}
                    title="Profile"
                    iconName='ios-home-outline'
                    onPress={() => {
                        this.setState({
                            selectedTab: 'profile',
                        });
                    }}>
                        <Profile/>
                </Icon.TabBarIOS>
                <Icon.TabBarIOS
                    selected={this.state.selectedTab === 'repositories'}
                    title='Repos'
                    iconName='ios-home-outline'
                    onPress={() => {
                        this.setState({
                            selectedTab: 'repositories',
                        });
                    }}>
                        <Repositories/>
                </Icon.TabBarIOS>
                <Icon.TabBarIOS
                    selected={this.state.selectedTab === 'following'}
                    title='Following'
                    iconName='ios-home-outline'
                    onPress={() => {
                        this.setState({
                            selectedTab: 'following',
                        });
                    }}>
                    <Following/>
                </Icon.TabBarIOS>
                <Icon.TabBarIOS
                    selected={this.state.selectedTab === 'followers'}
                    title='Followers'
                    iconName='ios-home-outline'
                    onPress={() => {
                        this.setState({
                            selectedTab: 'followers',
                        });
                    }}>
                    <Followers/>
                </Icon.TabBarIOS>
            </TabBarIOS>
        )
    }
}

export default class ProfileApp extends Component {
    render() {
        let pic = {
            uri: 'https://news.artnet.com/app/news-upload/2015/08/mona-lisa_2-e1440166499927.jpg'
        };
        return (
            <View style={styles.basic_info}>
                <Image source={pic} style ={styles.circle_image}/>
                <Text style={styles.name_text}>LM</Text>
            </View>,
            <ProfileTabs/>
        );
    }
}

我尝试了一些修复 here ，但是对于那里的很多答案，我不确定给定解决方案背后的推理，并且对于如何将其应用于我自己的代码感到困惑。如果我使用 TabBarIOS.Item 元素而不是 Icon.TabBarIos 元素，并使用 SystemIcons 而不是库图标，一切正常，所以我怀疑问题在于我如何导入/使用 react-native-vector-icons。

如果有更简单的方法来完成这一切，我也愿意重写我的代码。

Answer 1

如库代码中所述Ionicons.js ，TabBarIOS 没有命名导出，但TabBarItemIOS 和 TabBarItem。

因此您需要将其用作

  <TabBarIOS>
    <Icon.TabBarItemIOS
      title="Home"
      iconName="ios-home"
      selected={this.state.selectedTab === 'home'}
      onPress={() => {
        this.setState({
          selectedTab: 'home',
        });
      }}
    >
      {this.renderContent('#414A8C', 'Home')}
    </Icon.TabBarItemIOS>

即将 Icon.TabBarIOS 替换为 Icon.TabBarItemIOS

查看示例 here了解更多详情