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.js
和index.ios.js
这两个入口文件直接合并为了一个index.js
文件并创建一了一个App.js
文件,那我们现在就只需要来修改我们这个文件就可以达到我们的效果了。
直接配置导航栏
解释一下上面的代码
后半部分则是配置整个TabNavigator的样式了;重要的东西都在上面标好了注释认真阅读哦!
更多的属性介绍详见文章顶部给出的官网地址
接下来就是编写那四个页面的布局了,都是一样的改几个字就好了。Home.js
TabNavigator源码下载地址
这篇文章到这就over了,TabNavigator使用起来还是很简单的。接下来就可以写一个将
StackNavigator
、TabNavigator
结合起来使用的Demo了。
将StackNavigator和TabNavigator结合使用案例下载地址
将StackNavigator、DrawerNavigator和TabNavigator结合使用案例下载地址