目前React Native
提供的官方的Tab Bar
主要是TabBarIOS
, 但是该控件目前只支持IOS端
效果图
TabBarIOS
- 底部选项条, 不能跨平台,只能iOS端使用
- 添加如下代码, 就会出现底部选项条
1 | return ( |
相关属性
1 | barTintColor='yellow' |
选项卡: TabBarIOS.Item
TabBarIOS
: 只是表示底部的一个选项条TabBarIOS.Item
: 才代表每一个选项卡TabBarIOS.Item
必须包装一个View,作为点击tabBar按钮,切换的View
1 | <TabBarIOS.Item title='首页' |
常用属性
1 | badge string, number |
- 只要设置对应的tabBarItem的selected为true,就会自动跳转到对应界面
- 注意:tabBarItem的selected属性不能写死,可以搞个角标记录当前选中那个角标
- 监听tabBarItem的点击,修改selected属性
- 相关示例代码
1 | export default class App extends Component<{}> { |
TabNavigator
- TabBarIOS只能用于iOS平台,如果在安卓上也需要有TabBar,就不能使用TabBarIOS。
- TabNavigator:一个跨平台的TabBar第三方框架组件,可以用于iOS和安卓平台
- TabNavigator地址
安装和导入
安装第三方框架
1 | yarn add react-native-tab-navigator |
导入框架
1 | import TabNavigator from 'react-native-tab-navigator'; |
TabNavigator常用属性
属性 | 默认值 | 类型 | 描述 |
---|---|---|---|
sceneStyle | inherited | object (style) | 定义渲染的场景 |
tabBarStyle | inherited | object (style) | 为TabBar定义样式 |
tabBarShadowStyle | inherited | object (style) | 为TabBar定义阴影样式 |
hidesTabTouch | false | boolean | 禁用选项卡的onPress |
TabNavigator.Item常用属性
属性 | 默认值 | 类型 | 描述 |
---|---|---|---|
renderIcon | none | function | 选项卡图标 |
renderSelectedIcon | none | function | 选项卡选中状态图标 |
badgeText | none | string or number | 图标右上角显示 |
title | none | string | tabbar标题 |
titleStyle | inherited | style | 标题样式 |
selectedTitleStyle | inherited | style | 选中状态标题样式 |
tabStyle | inherited | style | 选项卡样式 |
hidesTabTouch | false | boolean | 是否选中该tabbar |
onPress | none | function | 选项卡的点击方法 |
allowFontScaling | false | boolean | 允许标题的字体缩放 |
- 使用示例
1 | render() { |