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

标签: HIMIMODALNAVIGATOR切换场景
2379人阅读 评论(1) 收藏 举报
分类:
本站文章均为 李华明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

 


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    【Himi 独立个人博客开放啦!】
    个人资料
    • 访问:2773495次
    • 积分:24487
    • 等级:
    • 排名:第246名
    • 原创:170篇
    • 转载:7篇
    • 译文:1篇
    • 评论:2926条
    ☞ About Himi
    ★Himi技术交流QQ群★
    .  Himi个人开发博客:
    .  www.himigame.com

    ☞ 【Unreal Engine 】
    @Himi: 191452043

    ☞ 【React Native】
    @Himi: 126100395

    ☞ 【Cocos Creator】
    @Himi: 432818031

    ☞ 【Cocos2dx】
    @Himi: 190193804

    ☞ 【C2dx-Lua】
    @Himi: 250916715

    博客专栏
    ☞ Himi-新浪微博
    最新评论