尝试使用自定义图标创建 TabBarIOS 时出现不变违规错误

Posted 2023-02-21

【中文标题】尝试使用自定义图标创建 TabBarIOS 时出现不变违规错误

【英文标题】：Invariant Violation error when trying to create a TabBarIOS with custom icons

【发布时间】：2018-09-02 19:06:57

【问题描述】：

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

Invariant Violation：元素类型无效：需要一个字符串（对于内置>组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查 ProfileTabs 的渲染方法。

此错误位于： 在 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/>
        );
    

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

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

【参考方案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 了解更多详情

【讨论】：

我已经尝试过你写的，复制了这个例子，把它从可能出错的地方去掉，但它仍然给我同样的错误：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 TabBarExample. This error is located at: in RCTTabBar (at TabBarIOS.ios.js:86) ...etc我觉得不知何故我的进口不工作。顺便说一句，我正在使用expo init

你可以更新你的问题，我去看看

另外，检查TabBarExample的渲染方法的错误状态，因此需要更新并发布完整的相关代码，谢谢。

好吧，所以我正在使用 Expo，我发现 @expo/vector-icons 不会为每个图标集公开 TabBarItemIOS。总而言之，世博不可能做到这一点。我提出了一个已经关闭的问题，表明他们没有公开它的计划：expo/vector-icons/issue#81