【REACT NATIVE 系列教程之八】不使用NAVIGATOR实现切换(页面)场景的两种形式(逻辑与MODAL)

原创 2016年06月02日 11:59:23
本站文章均为 李华明Himi 原创,转载务必在明显处注明: 
转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/react-native/2285.html

在第五篇中介绍了使用导航Navigator进行(页面)场景的切换,但是对于一些需求其实是无法满足,或者说太浪费。例如:

1. 只是想做一个很简单的页面切换,并不需要记录从哪来~也不需要手势滑屏返回等,这时使用导航Navigator太浪费了。

2. 假设:

a) 有个View 包括一个Navigator组件和一个Image组件

b) Navigator 对页面A ,B,C之间进行导航

此时我们有个需求在B页面切换到一个崭新空白的页面场景中(不带Image),此时我们想要通过Navigator实现需求则变得非常麻烦。(为此,Himi考虑尝试了很多方式)

本篇主要介绍除了使用Navigator 之外的两种切换页面的方法:

一:采用逻辑控制绘制

代码段1:

代码段2:

其实此种方式非常容易理解,是利用对变量的操作,进而控制绘制的不同。

 当通过this.setState()函数对pageIndex进行修改,从而this进行重绘时,会根据pageIndex的值不同,绘制出各不相同的内容。

(运行效果放在最后一并展示)

 

二:采用Modal组件

Modal组件,首先给出官方解释:

Modal组件可以用来覆盖包含React Native根视图的原生视图(如UIViewController,Activity)。

在嵌入React Native的混合应用中可以使用Modal。Modal可以使你应用中RN编写的那部分内容覆盖在原生视图上显示。

在从根视图开始就使用RN编写的应用中,你应该使用Navigator来代替Modal。通过一个最顶层的Navigator,你可以通过configureScene属性更加方便的控制如何将模态场景覆盖显示在你App其余的部分上。

简单来说,利用Modal只是模拟感觉切(页面)场景的,Modal只是覆盖到当前视图上而已,且可以任意布局和添加组件,Modal是个崭新空白的(页面)场景。

示例:

  animated: (bool类型)是否带有动画效果

注意:animated是旧版本才有的属性

新版本属性为:animationType enum(‘none’, ‘slide’, ‘fade’) 

  transparent: (bool类型)是否透明

  visible: (bool类型)是否可见

   onRequestClose:( 回调函数 ) 是指android的返回实体按钮,ios可以不用处理

需要强调的是,Modal 在设置为可见情况下,默认覆盖当前视图之上。

为了更好的演示效果与代码参考,Himi专门写了一个示例,如下两个文件:

Main.js 是入口显示的主要视图

SecondPage.js 是用来展示第一种逻辑切页用的

 

演示效果图:(点击查看动态效果)

user29

 


React-Native学习笔记之:导航器Navigator实现页面间跳转

Navigator用来实现不同页面的切换,想设置Navigator,必须确定一个或多个调用routes对象,去定义每个场景。 还可以利用renderScene方法,导航栏可以根据指定的路由来渲染场景。...
  • true100
  • true100
  • 2017年04月17日 10:03
  • 2427

React-native 尝鲜计划-场景切换(Navigator)

在上篇文章《react-native 尝鲜计划-环境搭建》中讲述了react-native 的环境搭建,并初始化了 react-native 的第一个项目。如果你已经完成了上一片文章的学习,并且成功调...
  • huangjijie123456
  • huangjijie123456
  • 2015年11月21日 14:41
  • 3314

【REACT NATIVE 系列教程之一】触摸事件的两种形式与四种TOUCHABLE组件详解

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/react-native/2203.html本...
  • xiaominghimi
  • xiaominghimi
  • 2016年05月11日 21:29
  • 4276

【REACT NATIVE 系列教程之十一】插件的安装、使用与更新(示例:REACT-NATIVE-TAB-NAVIGATOR)

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/react-native/2294.html本...
  • xiaominghimi
  • xiaominghimi
  • 2016年06月02日 12:08
  • 4646

TabBar切换页的实现——React-native-tab-navigator的使用

在构建TabBar的方式上,使用React-native-tab-navigator(https://github.com/exponentjs/react-native-tab-navigator)...
  • JLhaoran
  • JLhaoran
  • 2017年03月13日 16:03
  • 3360

【REACT NATIVE 系列教程之二】创建自定义组件&&导入与使用示例

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/react-native/2219.html在...
  • xiaominghimi
  • xiaominghimi
  • 2016年05月11日 21:37
  • 2514

react native 实战系列教程之热更新原理分析与实现

很多人在技术选型的时候,会选择RN是因为它具有热更新,而且这是它的一个特性,所以实现起来会相对比较简单,不像原生那样,原生的热更新是一个大工程。那就目前来看,RN的热更新方案已有的,有微软的CodeP...
  • shandian000
  • shandian000
  • 2017年01月17日 14:13
  • 1953

【稀饭】react native 实战系列教程之热更新原理分析与实现

很多人在技术选型的时候,会选择RN是因为它具有热更新,而且这是它的一个特性,所以实现起来会相对比较简单,不像原生那样,原生的热更新是一个大工程。那就目前来看,RN的热更新方案已有的,有微软的CodeP...
  • a631855639
  • a631855639
  • 2017年01月11日 18:57
  • 19437

【稀饭】react native 实战系列教程之首页列表UI实现

首页设计与实现首先,这章节讲的是首页内容的设计与实现,不包括主界面的设计,因为一开始入手,我希望能立马获取到数据并能展示出来,后面再来搭木积似的一步一步把整体框架做起来。设计(图丑,莫见怪~)主界面的...
  • a631855639
  • a631855639
  • 2016年08月26日 10:57
  • 2094

Android中通过React Native的Navigator实现场景跳转及数据传递

在React Native中要想实现Navigator导航器切换不同的界面就要先了解一个知识:其实了解过React Native的都应该知道,其实我们通过React Native写的这些“界面”,都是...
  • ServiceMe
  • ServiceMe
  • 2016年11月02日 13:46
  • 1523
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【REACT NATIVE 系列教程之八】不使用NAVIGATOR实现切换(页面)场景的两种形式(逻辑与MODAL)
举报原因:
原因补充:

(最多只允许输入30个字)