react-native 添加首頁底部導航欄出錯 react-native-tab-navigator Error:Element type is invalid:expected a string

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,
    },
});

成功截圖: