React Native从入门到深入 --TabBarIOS详解

前言

现在在移动开发中，最常见的框架结构就是主框架选项与选项之间的切换，比如微信，QQ等。在iOS中我们可以通过UITabbar来实现。在React Native中，通过TabBarIOS 和TabBarIOSItem来实现器功能。

注意：在react Native中所以的组件只有带有iOS或者Android后缀的组件，不能够跨平台运行。 需要自己搜索第三方框架来实现。

一、TabBarIOS常见的属性

View的所有属性都可以被继承

barTintColorcolor  设置tab条的背景颜色

tintColorcolor  设置tab条上被选中图标的颜色

translucentbool   设置Tab栏是不是半透明的效果

二、TabBarIOS.Item常见的属性

badge    number

在图标的右上方显示小红色气泡，显示信息

icon    Image.propTypes.source

Tab按钮自定义的图标，如果systemicon属性被定义了，那么该属性会被忽略

selected    bool

这个属性决定了子视图是否可见。如果你看到一个空白的页面，很可能是没有选中任何一个标签。

onPress  function

当此标签被选中时调用。你应该修改组件的状态来使得selected={true}。

selectedIcon      Image.propTypes.source

当标签被选中的时候显示的自定义图标。如果定义了systemIcon属性，这个属性会被忽略。如果定义了icon而没定义这个属性，在选中的时候图标会染上蓝色。

style设置样式风格，继承View的样式各种风格

systemIcon

enum('bookmarks','contacts','downloads','favorites','featured','history','more','most-recent','most-viewed','recents','search','top-rated')

系统预定义的图标，如果你使用这些图标，那么你上面设置的标题，选中的图标都会被这些系统图标所覆盖。

titlestring

在Tab按钮图标下面显示的标题信息，如果你设置了SystemIcon属性，那么该属性会被忽略

一、TabBarIOS的简单使用

TabBarIOS 为主要组件，每一个Item放在TabBarItem中。没有Item中需要放置组件来完成页面信息。TabBarItem有onPress,通过状态机判断是否选择，通过选中来判断是够点击。

代码截图：

运行结果：

完整demo请https://github.com/nanaLxs/react-TabBarIOSDemo下载。

作者：Zax_Smile
链接：https://www.jianshu.com/p/609550264fff