【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默认的右滑手势返回上一页

前言对于RN默认的导航组件Navigator, 可以通过右滑切换view,这样效果往往在项目中并不是很需要,但是想要去掉,也着实费了点功夫,下面来看如何解决这个问题?方法主要原理,也很简单,就是设置g...

react-native 页面切换的实现

NavigatorIOS导航只适用于iOS版本,不适合android。

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

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/react-native/2203.html本...

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

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/react-native/2294.html本...

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

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

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

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

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

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

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

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/react-native/2219.html在...

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

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

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

在React Native中要想实现Navigator导航器切换不同的界面就要先了解一个知识:其实了解过React Native的都应该知道,其实我们通过React Native写的这些“界面”,都是...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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