主页 > 新体验 > 设计沙龙 > 技术调研
  • ReactNative中TabBarIOS和NavigatorIOS嵌套使用

    adinnet/2017-04-24 15:06/技术调研

    在原生的iOS中,现在很多的项目结构都是UITabBarController和UINavigationController嵌套使用的,在ReactNative中要实现TabBarIOS和NavigatorIOS的嵌套,流程和原生的iOS非常相似,这篇文章将介绍这两者的嵌套,因为我是做iOS开发的,所以只会与iOS中的流程进行对比,Android的同学可以参考一下。

    本文的Demo更终要实现的效果如下:

    91514-baa831baffc14bcc.gif

    更终效果.gif

    1. 文件结构

    这个Demo中所创建的文件结构如下图:

    91514-a848e4d876d47434.png

    文件结构.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组件,下面是代码标注的图,可以根据图上的步骤来理解:

    91514-deac9e11962b429d.png

    代码标注.png

    下面是MyTabBar.js中的代码

    QQ截图20170421163105.png

    其中HomePage和FavorPage的代码由于篇幅有限就不贴出来了,就是简单的页面颜色样式展示一下。

    然后,在项目的index.ios.js文件中,导入MyTabBar组件,并使用,就可以看到效果了。

    QQ截图20170421163135.png

    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中的内容替换为下面的内容:

    32.png

    在首页面中,我们需要在按钮点击之后,从this.props中拿到navigator,然后通过navigator.push()方法来推出下一页面。代码如下:

    QQ截图20170421163238.png

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

    本文Demo代码

    总结:

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

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

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

上一篇:想要提升转化率?那你要明白这些色彩心理学知识下一篇:界面交互动效核心知识的分类与总结
400-021-8655
在线咨询
在线留言