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

selected={this.state.selectedTab === 'home'} //选中的状态

title="Home" //Tabbar的文字

renderIcon={() => } //TabBar的图标，注意要设置大小

renderSelectedIcon={() => } //TabBar选中时候的图标，注意要设置大小

badgeText="1" //右上角的字

onPress={() => this.setState({ selectedTab: 'home' })}

titleStyle={{color:"red”}} //未选中状态文字的大小

selectedTitleStyle={{color:"green”}} //选中状态文字的大小

>

selected={this.state.selectedTab === 'profile'} //选中的状态

title="Profile" //Tabbar的文字

renderIcon={() => } //TabBar的图标，注意要设置大小

renderSelectedIcon={() => } //TabBar选中时候的图标，注意要设置大小

renderBadge={() => }

onPress={() => this.setState({ selectedTab: 'profile' })}

titleStyle={{color:"red”}} //未选中状态文字的大小

selectedTitleStyle={{color:"green”}} //选中状态文字的大小

>

```

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;

tabBarStyle={{ height: tabBarHeight,overflow: 'hidden' }}

sceneStyle={{ paddingBottom: tabBarHeight }}

/>

```

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！