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

作者: Zax_Smile | 来源:发表于2016-09-18 15:48 被阅读887次

    前言

    现在在移动开发中,最常见的框架结构就是主框架选项与选项之间的切换,比如微信,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下载。如果感觉可以请star。在这里谢谢啦!!

    相关文章

      网友评论

      • 追你的小豪:你好 你的代码呢 方便给份2625952046@qq.com
        Zax_Smile:@追你的小豪 稍后压缩发给你
      • Zax_Smile:你设置的NavigatorItem的点击那里出来问题onPress方法对吗?是根据状态来改变是否是选中状态的 selelcted属性是否设置了。
      • Xcode8:我这边写完之后,不能切换?为啥呀?

      • d5afb2c14b58:挺炫的

      本文标题:React Native从入门到深入 --TabBarIOS详解

      本文链接:https://www.haomeiwen.com/subject/zdgwettx.html