react-native 添加首页底部导航栏出错 react-native-tab-navigator Error:Element type is invalid:expected a string

本文解决在react-native项目中使用react-native-tab-navigator组件时遇到的底部导航栏显示错误问题，通过调整组件导入方式，成功实现了底部导航栏的正常显示。

react-native 添加首页底部导航栏出错 react-native-tab-navigator

https://github.com/ptomasroos/react-native-tab-navigator/issues/203

报错内容：Error:Element type is invalid:expected a string(for built-in components) or a class/function(for composite components)but got:undefined.you likely forget to export your component from the file it's defined in,or you might have mixed up default and named imports.

checke the render method of 'Main'
This error idlocated at:
in TabNavigatorItem (at main.js:32)
...

<TabNavigator.Item>

main.js

import React, {Component} from 'react';
import {
View,
Text,
Button,
Image,
Platform,
StatusBar,
StyleSheet,
AppRegistry,
} from 'react-native';
import {Home} from '../home/home';
import {Find} from '../find/find';
import {Mine} from '../mine/mine';
import {More} from '../more/more';
//navigtionDrawble 导航栏首页
import TabNavigator from 'react-native-tab-navigator';
//路由
// import {Navigator} from 'react-native-deprecated-custom-components';
//equals fragment
export default class Main extends Component {

constructor(props) {
    super(props);
    this.state = {
        selectedTab: 'home',
    };
}

render() {
    return (
        <TabNavigator.Item
            title="首页"
            renderIcon={() => <Image source={require('../../res/images/icon_tabbar_homepage.png')}
                                     style={styles.iconStyle}/>}
            renderSelectedIcon={() => <Image
                source={require('../../res/images/icon_tabbar_homepage_selected.png')}
                style={styles.iconStyle}/>}
            badgeText="1"
            selected={this.state.selectedTab === 'home'}
            onPress={() => this.setState({selectedTab: 'home'})}
        >
            {<Home/>}
        </TabNavigator.Item>
    );
}
};

const styles = StyleSheet.create(
{
iconStyle: {
width: Platform.OS === 'ios' ? 30 : 25,
height: Platform.OS === 'ios' ? 30 : 25,
},
},
);

报错内容主要是#32行 <TabNavigator.Item> undefined

这让我一度怀疑我的node ，react-native版本太新，因为github作者去年4月最后一次更新到现在已经一年多了，所以我找寻了很多react-native-tab-navigator框架报错的资料，最后发现不是的，框架没有任何问题，是代码问题

import {Home} from '../home/home';
import {Find} from '../find/find';
import {Mine} from '../mine/mine';
import {More} from '../more/more';

以上是错误方法，这几行代码正确引入方式：

import Home from '../home/home';
import Find from '../find/find';
import Mine from '../mine/mine';
import More from '../more/more';

正确的引入代码：

import React, {Component} from 'react';
import {
    View,
    Text,
    Button,
    Image,
    Platform,
    StatusBar,
    StyleSheet,
    AppRegistry,
} from 'react-native';
import Home from '../home/home';
import Find from '../find/find';
import Mine from '../mine/mine';
import More from '../more/more';
//navigtionDrawble 导航栏首页
import TabNavigator from 'react-native-tab-navigator';
//路由
import {Navigator} from 'react-native-deprecated-custom-components';
//equals fragment
export default class Main extends Component {

    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'home',
        };
    }

    render() {
        return (
            <TabNavigator>
                <TabNavigator.Item
                    title="首页"
                    renderIcon={() => <Image source={require('../../res/images/icon_tabbar_homepage.png')}
                                             style={styles.iconStyle}/>}
                    renderSelectedIcon={() => <Image
                        source={require('../../res/images/icon_tabbar_homepage_selected.png')}
                        style={styles.iconStyle}/>}
                    badgeText="1"
                    selected={this.state.selectedTab === 'home'}
                    onPress={() => this.setState({selectedTab: 'home'})}
                >
                    <Navigator
                        initialRoute={{
                            name: '首页',
                            component: Home,
                        }}
                        renderScene={
                            (router, navigator) => {
                                let Component = router.component;
                                return <Component {...router.params} navigator={navigator}/>;
                            }
                        }/>
                </TabNavigator.Item>
                <TabNavigator.Item
                    selected={this.state.selectedTab === 'find'}
                    title="发现"
                    renderIcon={() => <Image source={require('../../res/images/icon_tabbar_merchant_normal.png')}
                                             style={styles.iconStyle}/>}
                    renderSelectedIcon={() => <Image
                        source={require('../../res/images/icon_tabbar_merchant_selected.png')}
                        style={styles.iconStyle}/>}
                    badgeText="2"
                    onPress={() => this.setState({selectedTab: 'find'})}>
                    <Find/>
                </TabNavigator.Item>
                <TabNavigator.Item
                    selected={this.state.selectedTab === 'more'}
                    title="订单"
                    renderIcon={() => <Image source={require('../../res/images/icon_tabbar_misc.png')}
                                             style={styles.iconStyle}/>}
                    renderSelectedIcon={() => <Image
                        source={require('../../res/images/icon_tabbar_misc_selected.png')} style={styles.iconStyle}/>}
                    badgeText="3"
                    onPress={() => this.setState({selectedTab: 'more'})}>
                    <More/>
                </TabNavigator.Item>
                <TabNavigator.Item
                    selected={this.state.selectedTab === 'mine'}
                    title="我的"
                    renderIcon={() => <Image source={require('../../res/images/icon_tabbar_mine.png')}
                                             style={styles.iconStyle}/>}
                    renderSelectedIcon={() => <Image
                        source={require('../../res/images/icon_tabbar_mine_selected.png')} style={styles.iconStyle}/>}
                    badgeText="4"
                    onPress={() => this.setState({selectedTab: 'mine'})}>
                    <Mine/>
                </TabNavigator.Item>
            </TabNavigator>
        );
    }
};


const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    iconStyle: {
        width: Platform.OS === 'ios' ? 30 : 25,
        height: Platform.OS === 'ios' ? 30 : 25,
    },
});

成功截图: