前言
-
学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习
-
本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在学习中如果有错会及时修改内容,也欢迎万能的朋友们批评指出,谢谢
-
文章第一版出自简书,如果出现图片或页面显示问题,烦请转至 简书 查看 也希望喜欢的朋友可以点赞,谢谢
TabBarIOS 组件简介
- 目前的APP内,大部分都是选项与选项之间切换,比如:微信、微博、QQ空间…,在iOS中,我们可以通过TabItem类进行实现,那么,在React Native中,我们可以通过TabBarIOS和TabBarIOS.Item组件来实现选项卡切换效果,大家可以看到后面带有IOS,所以这个组件不支持Android,当然后面我们会通过自定义该组件来满足实际开发需求
- 当然,本章涉及到了 TabBarIOS组件 ,那么必不可少的,肯定需要与 TabBarIOS.Item 来搭配使用,废话不多说,先来看它们各自都拥有哪些属性
TabBarIOS 常见属性
-
继承了View的所有属性
-
barTintColor:标签栏的背景颜色
-
tintColor:当前被选中的标签图标颜色
-
translucent:bool值,决定标签栏是否需要半透明化
TabBarIOS.Item 常见属性
-
继承了View的所有属性
-
badge:图标右上角显示的红色角标
-
icon:给当前标签指定一个自定义图标(如果定义了 systemIcon属性 这个属性会被忽略)
-
onPress:点此标签被选中时调用,你应该修改过组件的状态使 selected={true}
-
selected:这个属性决定了子视图是否可见,如果你看到一个空白的页面,很可能是没有选中任何一个标签
-
selectedIcon:当标签被选中的时候显示的自定义图标(如果定义了systemIcon属性,这个属性会被忽略,如果定义了icon而没定义这个属性,在选中的时候图标会被染上蓝色)
-
systemIcom:一些预定义的系统图标(如果使用了此属性,标题和自定义图标都会被覆盖为系统定义的值)
- 默认值:'bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated'
-
title:在图标下面显示的标题文字(如果定义了 systemIcon属性,这个属性会被忽略)
TabBarIOS 初体验
-
先简单来看下怎么使用TabBarIOS

