React-Native选项卡(react-navigation)之createBottomTabNavigator学习

前言:

    上一章节咱们学习了导航条createStackNavigator,这一章咱们紧接着来学习选项卡createBottomTabNavigator,在iOS中这是tabbar.

效果:

    咱们先来看一下要实现的效果↓

咱们看到上gif图中,底部有两个页面,有Home页面,Settings页面,其中点击Home的Go To HomeDetail按钮会跳转一个HomeDetail详情页面.  因此咱们在上一章代码中的两个界面的基础上还须要在建立一个界面,咱们命名为HomeDetail

思路:

     先简单说下思路,通常APP模块是根据底部选项卡来划分的(也就是这里的createBottomTabNavigator). 很明显,咱们demo中分为两个模块,Home和Settings,Home界面点击按钮能够跳转一个界面,因此Home模块有两个界面,settings模块一个界面.咱们定义路由的时候就根据这个思路去作.

实战:

      仍是老规矩,首先咱们须要先引入文件.引入新增长的HomeDetail页面.

而后配置路由.分为两个模块配置

配置完成后须要统一交由vreateBottomTabNavigator去管理

到这里咱们就实现了基本的导航条功能.若是对你有帮助,请分享给身边的朋友.让咱们一块儿进步!

 我代码以图片的形式展现一是为了更直观的展现,另外一方面是推荐你们敲一遍加深印象.如需源码请加群,交流学习!  最后附上网络请求配合经常使用列表学习分享:http://www.javashuo.com/article/p-glmsktxc-gw.html