来源:https://sanwen8.cn/p/28aALep.html
这段时间正在开发更新React Native嘎嘎商城实战项目,其实主界面是比较常见的Tab菜单切换的效果。React Native官方也给我们提供了这样的组件TabBariOS以及TabBariOS.Item。但是该只适合于iOS版本,但是Android版本需要自己写,最近正好在Github上面看到一个Android和iOS通用的Tab菜单导航切换库。所以本商城项目中采用这个库来实现了,下面我们一起来实现以下主界面的效果。
Tab-Navigator库介绍
商城主框架Tab实现
再说两句
这段时间正在开发更新React Native嘎嘎商城实战项目,其实主界面是比较常见的Tab菜单切换的效果。React Native官方也给我们提供了这样的组件TabBariOS以及TabBariOS.Item。但是该只适合于iOS版本,但是Android版本需要自己写,最近正好在Github上面看到一个Android和iOS通用的Tab菜单导航切换库。所以本商城项目中采用这个库来实现了,下面我们一起来实现以下主界面的效果。
-
项目根目录运行如下命令进行下载安装react- native-tab-navigator库
npm install react-native-tab-navigator --save
-
在使用的页面如下导入TabNavigator
import TabNavigator from 'react-native-tab-navigator';
-
该库使用方法其实非常简单,简单的配置即可,看如下实例代码:
-
TabNavigator.Item支持的所有属性如下:
上面我们介绍了该库的基本使用方式以及可以使用的属性,下面我们一起来实现的效果,核心代码如下:
运行效果如下:
本篇上面的代码截图只是显示部分核心代码,详细代码请底部阅读原文或者访问:https://github.com/jiangqqlmj/GaGaMall