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,
},
});
成功截图:
网友评论