尝试创建带有自定义图标的TabBarIOS时发生不变冲突错误

Question

我在这里要完成的基本任务是合并这两个教程（x）（x），以便创建一个具有自定义图标的简单TabBar。我正在尝试使用来自react-nily-vport-icons库的图标，我已经将其添加到我的节点模块中。然而，我遇到了一个障碍：

不变违反：元素类型无效：预期为字符串（用于内置

检查ProfileTabs的渲染方法。

此错误位于：in RCTTabBar（位于TabBarIOS.ios.js:82）

在TabBarIOS（App.js:19）

在ProfileTabs中（位于App.js:80）

在ProfileApp中（位于registerRotComponent.js:35）

在RootErrBoundary（在注册RootComponent.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。项目元素而不是图标。TabBarIos元素，并使用系统图标而不是库图标，一切正常，因此我怀疑问题在于如何导入/使用react本机向量图标。

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

Answer 1

正如我onicons.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>

即替换图标。带有图标的TabBarIOS。TabBarItemIOS

有关更多详细信息，请查看此处的示例