底部导航组件组件react-native-tab-navigator的使用

组件react-native-tab-navigator的使用
1、npm安装，导入组件react-native-tab-navigator
import TabNavigator from 'react-native-tab-navigator';

2、代码如下

selected={this.state.selectedTab === 'home'}
selectedTitleStyle={styles.btselcttext}
title="Home"
renderIcon={() => }
renderSelectedIcon={() => }
// badgeText="1"
onPress={() => this.setState({ selectedTab: 'home' })}>


selected={this.state.selectedTab === 'messge'}
selectedTitleStyle={styles.btselcttext}
title="消息"
renderIcon={() => }
renderSelectedIcon={() => }
// badgeText="1"
// renderBadge={() => }
onPress={() => this.setState({ selectedTab: 'messge' })}>


selected={this.state.selectedTab === 'shop'}
selectedTitleStyle={styles.btselcttext}
// title="shop"
renderIcon={() => }
renderSelectedIcon={() => }
// badgeText="1"
onPress={() => this.setState({ selectedTab: 'shop' })}>


selected={this.state.selectedTab === 'find'}
selectedTitleStyle={styles.btselcttext}
title="发现"
renderIcon={() => }
renderSelectedIcon={() => }
// badgeText="1"
onPress={() => this.setState({ selectedTab: 'find' })}>


selected={this.state.selectedTab === 'profile'}
selectedTitleStyle={styles.btselcttext}
title="我的"
renderIcon={() => }
renderSelectedIcon={() => }
// renderBadge={() => }
onPress={() => this.setState({ selectedTab: 'profile' })}>

3、路由的嵌套容易造成布局的混乱，比如头部标题等无法显示