360SDN.COM

React Native实战之轻松实现通用Tab底部菜单导航栏切换效果

来源:  2017-06-18 16:46:08    评论:0点击:

来源:https://sanwen8.cn/p/28aALep.html
  这段时间正在开发更新React Native嘎嘎商城实战项目,其实主界面是比较常见的Tab菜单切换的效果。React Native官方也给我们提供了这样的组件TabBariOS以及TabBariOS.Item。但是该只适合于iOS版本,但是Android版本需要自己写,最近正好在Github上面看到一个Android和iOS通用的Tab菜单导航切换库。所以本商城项目中采用这个库来实现了,下面我们一起来实现以下主界面的效果。
Tab-Navigator库介绍
 
 
  • 项目根目录运行如下命令进行下载安装react- native-tab-navigator库

    npm install react-native-tab-navigator --save

  • 在使用的页面如下导入TabNavigator

    import TabNavigator from 'react-native-tab-navigator';

  • 该库使用方法其实非常简单,简单的配置即可,看如下实例代码:


     

  • TabNavigator.Item支持的所有属性如下:

商城主框架Tab实现
 
 

      上面我们介绍了该库的基本使用方式以及可以使用的属性,下面我们一起来实现的效果,核心代码如下:


运行效果如下:

再说两句
 
 

        本篇上面的代码截图只是显示部分核心代码,详细代码请底部阅读原文或者访问:https://github.com/jiangqqlmj/GaGaMall

为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权