ReactNative中TabBarIOS和NavigatorIOS嵌套使用
在原生的iOS中，现在很多的项目结构都是UITabBarController和UINavigationController嵌套使用的，在ReactNative中要实现TabBarIOS和NavigatorIOS的嵌套，流程和原生的iOS非常相似，这篇文章将介绍这两者的嵌套，因为我是做iOS开发的，所以只会与iOS中的流程进行对比，Android的同学可以参考一下。
本文的Demo最终要实现的效果如下:
最终效果.gif
1. 文件结构
这个Demo中所创建的文件结构如下图：
文件结构.png
HomePage.js 代表首页面
FavorPage.js 代表TabBar的第二个页面（收藏页面）
NextPage.js 是首页push进入的第二个页面
MyTabBar.js 是自己创建的TabBar和Navigator组件
2.TabBarIOS 和 TabBarIOS.Item的基本使用
1）封装自定义TabBarIOS组件
ReactNative的TabBarIOS组件的使用其实跟我们在iOS中使用UITabBarController很相似。而TabBarIOS.Item类似于iOS开发中的每个childViewController。
在iOS开发中，要创建一个UITabBarController，我们需要先创建出对应的child ViewController，存入到UITabBarController的viewControllers属性中，然后我们可以通过设置child ViewController的tabBarItem属性来配置BarItem。
在ReactNative中，要创建一个TabBarIOS，我们先创建对应的TabBarIOS.Item组件，将它们封装在TabBarIOS组件中，然后同样的，通过设置TabBarIOS.Item的属性来配置BarItem。
TabBarIOS组件的属性主要有下面几个： TabBarIOS
barTintColor: 标签栏的背景颜色。
tintColor: 当前被选中的标签图标的颜色。
unselectedItemTintColor: 当前没有被选中的标签图标的颜色。仅在iOS 10及以上版本有效
translucent: 一个布尔值，决定标签栏是否需要半透明化。
TabBarIOS.Item组件的属性主要有下面几个： TabBarIOS.Item
badge: 在图标右上角显示一个红色的气泡。
icon: 给当前标签指定一个自定义的图标。如果定义了systemIcon属性， 这个属性会被忽略
onPress: 当此标签被选中时调用。你应该修改组件的状态来使得selected={true}。
selected : 这个属性决定了子视图是否可见。如果你看到一个空白的页面，很可能是没有选中任何一个标签。
selectedIcon: 当标签被选中的时候显示的自定义图标。如果定义了systemIcon属性，这个属性会被忽略。如果定义了icon而没定义这个属性，在选中的时候图标会染上蓝色。
systemIcon: 一些预定义的系统图标。注意如果你使用了此属性，标题和自定义图标都会被覆盖为系统定义的值。
title: 在图标下面显示的标题文字。如果定义了systemIcon属性，这个属性会被忽略。
打开MyTabBar.js文件，开始封装TabBarIOS组件，下面是代码标注的图，可以根据图上的步骤来理解:
代码标注.png
下面是MyTabBar.js中的代码
其中HomePage和FavorPage的代码由于篇幅有限就不贴出来了，就是简单的页面颜色样式展示一下。
然后，在项目的index.ios.js文件中，导入MyTabBar组件，并使用,就可以看到效果了。
3. NavigatorIOS的基本使用
TabBarIOS加入之后，我们需要在首页上加入一个NavigatorIOS组件，来控制页面的跳转。
ReactNative中的NavigatorIOS组件我们主要需要实现三个属性:
initialRoute : 初始化路由，这个属性其实跟iOS开发中UINavigationController的rootViewController非常相似,将导航控制器的根页面在这个属性中配置好。
configureScene: 这个属性是一个可选的函数，用来配置场景动画和手势，这个函数有两个参数，一个是路由，一个是当前的路由栈。转场动画的类型有很多，可以在项目目录/node_modules/[React](http://lib.csdn.net/base/react)-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js这个文件中查看。
renderScene: 这个属性是必要参数，用来渲染指定路由的场景。调用的参数是路由和导航器。在这个方法中，我们可以通过路由获取到当前需要渲染的页面，然后把导航器作为一个属性传给当前页面，最后将这个页面返回出去。在这个被渲染的页面中，就可以拿到导航器来进行push操作了（这一点比较难理解，可以在网上多找一些资料看看，其实我也理解的不是很好）。
因为要在HomePage中嵌入导航器，所以将上一步中TabBarIOS.Item中的
在首页面中，我们需要在按钮点击之后，从this.props中拿到navigator，然后通过navigator.push()方法来推出下一页面。代码如下：
最后，我们就可以得到本文开头的效果了。
总结：
ReactNative中的TabBarIOS和NavigatorIOS的使用其实跟iOS开发中的使用非常相似，在写代码的时候可以跟iOS对比着去理解，可能会更好。
最近刚入坑RN，了解的不多，本文只是作为一个iOS开发者的一些RN总结，希望能帮助到需要了解的人。可能有哪些地方写的有问题，可以提出来，也是对我的帮助。有想要学习RN的同学如果需要视频教程或者一些书籍，可以私信我。
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
