react native之TabBar底部导航(兼容Android和IOS)-- react-native-tab-navigator
1.下载依赖
npm install react-native-tab-navigator --save
具体如何使用查看node_modules找到该组件查看README和点开里面的js查看所可以设置的属性
```js
import TabNavigator from 'react-native-tab-navigator';
```
This is an example of how to use the component and some of the commonly used props that it supports:
```js
<TabNavigator>
<TabNavigator.Item
selected={this.state.selectedTab === 'home'} //选中的状态
title="Home" //Tabbar的文字
renderIcon={() => <Image source={...} />} //TabBar的图标，注意要设置大小
renderSelectedIcon={() => <Image source={...} />} //TabBar选中时候的图标，注意要设置大小
badgeText="1" //右上角的字
onPress={() => this.setState({ selectedTab: 'home' })}
titleStyle={{color:"red”}} //未选中状态文字的大小
selectedTitleStyle={{color:"green”}} //选中状态文字的大小
>
<HomeView/>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'profile'} //选中的状态
title="Profile" //Tabbar的文字
renderIcon={() => <Image source={...} />} //TabBar的图标，注意要设置大小
renderSelectedIcon={() => <Image source={...} />} //TabBar选中时候的图标，注意要设置大小
renderBadge={() => <CustomBadgeView />}
onPress={() => this.setState({ selectedTab: 'profile' })}
titleStyle={{color:"red”}} //未选中状态文字的大小
selectedTitleStyle={{color:"green”}} //选中状态文字的大小
>
<ProfileView/>
</TabNavigator.Item>
</TabNavigator>
```
See TabNavigatorItem's supported props for more info.
### Hiding the Tab Bar
You can hide the tab bar by using styles. For example:
```js
let tabBarHeight = 0;
<TabNavigator
tabBarStyle={{ height: tabBarHeight,overflow: 'hidden' }}
sceneStyle={{ paddingBottom: tabBarHeight }}
/>
```
