第一步. 初始化子View

constructor(props){
  super(props);
  this.state = {

    isChange : true,
    itemView : (<Text>测试1</Text>),
  }
};

第二步. 在render中

<View style={{flex:Util.ScreenHeight-128,justifyContent: 'flex-start',}}>
  {this.state.itemView}
</View>

第三步. 在触发事件中动态设置state

let itemView;

var isChange = !this.state.isChange;
if (isChange) {
  itemView = (<Text>测试1</Text>);
} else{
  itemView = (<Text>测试2</Text>);
};
this.setState({
  isChange : isChange,
  itemView : itemView,
});

React Native 实现页面动态切换的更多相关文章

  1. react native 之页面布局

     第一章 flexbox 布局 1.flexDirection:'row', 水平 flexDirection:'column',垂直 需要在父元素上设置这种属性才能实现flex. flex:1 会撑 ...

  2. react native 之页面跳转

    第一章  跳转的实现 1.component  中添加这行代码 <View style={styles.loginmain}> <Text style={styles.loginte ...

  3. jquery实现页面动态切换的方法--toggleClass(className)

    $(function() { $(".A").click(function() { $(this).toggleClass("B"); }); }); 当点击带 ...

  4. react native底部tab栏切换

    1.安装tab栏插件 npm i react-native-tab-navigator --save 2.引入对应的组件和tab插件 import { Platform, StyleSheet, Te ...

  5. 混合开发的大趋势之一React Native之页面跳转

    转载请注明出处:王亟亟的大牛之路 最近事情有点多,没有长时间地连贯学习,文章也停了一个多礼拜,愧疚,有时间还是继续学习,继续写! 还是先安利:https://github.com/ddwhan0123 ...

  6. 混合开发的大趋势之一React Native之页面跳转(2)+物理返回+特定平台代码

    转载请注明出处:这里写链接内容 今天是10月份的最后一天,我加了3个月来的第一个班,挤出了这篇. 废话不多先安利,然后继续学习 RN 有好东西都往里面丢,努力做好归纳 https://github.c ...

  7. [技术博客]React Native——HTML页面代码高亮&数学公式解析

    问题起源 原有博文显示时代码无法高亮,白底黑字的视觉效果不好. 原有博文中无法解析数学公式,导致页面会直接显示数学公式源码. 为了解决这两个问题,尝试了一些方法,最终利用开源类库实现了页面美化. (失 ...

  8. 一次掌握 React 与 React Native 两个框架

    此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法. 1. 软件开发语言与框架的学习本质 我 ...

  9. React Native之code-push的热更新(ios android)

    React Native之code-push的热更新(ios android) React Native支持大家用React Native技术开发APP,并打包生成一个APP.在动态更新方面React ...

随机推荐

  1. 概念:P制,N制,奇场,偶场,隔行扫描,逐行扫描

    转帖: 场的概念原于电视,电视由于要克服信号频率带宽的限制,无法在制式规定的刷新时间内(PAL制式是25fps)同时将一帧图象显现在屏幕上,只能将图象分成两个半幅的图像,一先一后地显现,由于刷新速度快 ...

  2. [PHP] - Laravel 5 的 Hello Wold

    吐槽一段 整了半天,Laravel下载麻烦得可以去死.先要安装composer,而composer又被共墙了,之后又要安装git,安装完git还要注册git,等等.... 最终放弃这种玩法,太恶心了. ...

  3. 【转】keil+stm32+jlink利用swd方式进行printf输出

    出处:http://www.douban.com/note/248637026/ ----------------------------------------------------------- ...

  4. 显示intent和隐示intent有什么区别

    显式Intent定义:对于明确指出了目标组件名称的Intent,我们称之为显式Intent. 隐式Intent定义:对于没有明确指出目标组件名称的Intent,则称之为隐式Intent. 说明:And ...

  5. JVM 垃圾回收器工作原理及使用实例介绍

    IBM介绍文档:https://www.ibm.com/developerworks/cn/java/j-lo-JVMGarbageCollection/ Java 的新生代串行垃圾回收器中使用了复制 ...

  6. 【巩固】Bootstrap笔记三

    这段笔记介绍了bootstrp中以下几点应用点: 警告框的使用 面板功能 运用chart.js制作图表 进度条的制作 媒体对象的制作 有一个元素如果有属性alert-dismissible" ...

  7. Android高手速成

    第一部分 个性化控件(View)    http://www.cnblogs.com/huwei0814/p/3796659.html 第二部分 工具库    http://www.cnblogs.c ...

  8. JS获取上个月(转)

    1.yyyy-mm-dd获取上个月 function getUpMonth(t){ var tarr = t.split('-'); var year = tarr[0]; //获取当前日期的年 va ...

  9. PHP基础知识2

    1.运算符 1.运算符简单来说就是用来连接各个常量.变量以及函数和其他表达式参与运算的符号! 2.运算符的优先级 2.流程控制 1.流程控制,就是指程序执行的"路线",一般是用相关 ...

  10. C#:String.Format数字格式化输出 {0:N2} {0:D2} {0:C2}等等

    int a = 12345678; //格式为sring输出//   Label1.Text = string.Format("asdfadsf{0}adsfasdf",a); / ...