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()方法来推出下一页面。代码如下：

更后，我们就可以得到本文开头的效果了。

本文Demo代码

总结：

ReactNative中的TabBarIOS和NavigatorIOS的使用其实跟iOS开发中的使用非常相似，在写代码的时候可以跟iOS对比着去理解，可能会更好。

更近刚入坑RN，了解的不多，本文只是作为一个iOS开发者的一些RN总结，希望能帮助到需要了解的人。可能有哪些地方写的有问题，可以提出来，也是对我的帮助。有想要学习RN的同学如果需要视频教程或者一些书籍，可以私信我。

文章摘录链接 ：http://www.cocoachina.com/ios/20170424/19098.html