尝试使用自定义图标创建TabBarIOS时出现Invariant Violation错误

Question

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

不变违规:元素类型无效:期望一个字符串(对于内置的>组件)或一个类/函数(对于复合组件)但得到:undefined.您可能忘记从其定义的文件中导出组件,或者您可能混淆了默认导入和命名导入.

检查ProfileTabs的render方法.

此错误位于:在RCTTabBar中(在TabBarIOS.ios.js:82)

在TabBarIOS中(在App.js:19)

在ProfileTabs中(在App.js:80)

在ProfileApp中(在registerRootComponent.js:35)

在RootErrorBoundary中(在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/>
        );
    }
}

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

如果有一种更简单的方法来完成所有这些,我也愿意重写我的代码.

Answer 1

正如库代码Ionicons.jsTabBarIOS中提到的， 除了 forTabBarItemIOS和之外，没有命名导出 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

查看此处的示例以了解更多详细信息