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
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!