使用react-navigation实现页面导航布局效果(TabNavigator

  • 时间:2017-10-24
  • 分类:数据库/系统
  • 1246 人浏览
上一篇介绍了一下react-navigation依赖库中的StackNavigator 这篇文章就接着上一篇继续往下说也就是依赖库中的第二个导航栏TabNavigator相当于Android中的TabLayout TabNavigator:

官网地址:https://reactnavigation.org/docs/navigators/tab
 废话就不多说了直接来看效果、看代码

效果图:

    

使用的第一步当然是下载react-navigation这个依赖库了 既然使用的是第三方库,如果在你项目的node_modules文件夹中没有react-navigation那么你需要执行如下命令

由于react-native-0.49.3这个版本直接将index.android.jsindex.ios.js这两个入口文件直接合并为了一个index.js文件并创建一了一个App.js文件,那我们现在就只需要来修改我们这个文件就可以达到我们的效果了。 直接配置导航栏

解释一下上面的代码

后半部分则是配置整个TabNavigator的样式了;重要的东西都在上面标好了注释认真阅读哦! 更多的属性介绍详见文章顶部给出的官网地址 接下来就是编写那四个页面的布局了,都是一样的改几个字就好了。Home.js

TabNavigator源码下载地址

这篇文章到这就over了,TabNavigator使用起来还是很简单的。接下来就可以写一个将 StackNavigatorTabNavigator结合起来使用的Demo了。

将StackNavigator和TabNavigator结合使用案例下载地址

    

将StackNavigator、DrawerNavigator和TabNavigator结合使用案例下载地址

来源:本文为线上采编,如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除!