第一步. 初始化子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. java并发编程系列

    1.多线程的概念与使用:java笔记五:多线程的使用 2.多线程产生的问题,解决的方法, 1.引入线程池的原因:Java并发编程:线程池的使用 2.高并发情况下数据库提交:jdbc事务处理, 理解事务 ...

  2. Android SQLite 通配符查询找不到参数问题

    使用Android SQLite中SQLiteDatabase类的query方法查询时,如果where中包含通配符,则参数会无法设置,如类似下面的方法查询时 SQLiteDatabase db = d ...

  3. jquery 百度搜索

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 黄聪:关闭Win2003开机提示“上次意外关机”对话框

    很多人在使用win2003服务器(特别是vps)的时候,都会意外关机,然后出现开机提示“上次意外关机”对话框,如果不及时发现,会影响到使用该服务器的网站,所以必须把这提示关闭,方法如下: 1.开始菜单 ...

  5. SVN的感叹号

    黄色感叹号(有冲突):--这是有冲突了,冲突就是说你对某个文件进行了修改,别人也对这个文件进行了修改,别人抢在你提交之前先提交了,这时你再提交就会被提示发生冲突,而不允许你提交,防止你的提交覆盖了别人 ...

  6. css3 flex盒子布局

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. 生成均值文件mean.binaryproto

    [感谢:http://www.cnblogs.com/denny402/p/5102328.html] compute_image_mean.bin生成均值文件mean.binaryproto: ca ...

  8. Oracle补习班第一天

    My life is a straight line, turning only for you. 我的人生是一条直线,为你转弯

  9. Flask最佳实践

    https://zhuanlan.zhihu.com/p/22774028?refer=python-cn

  10. SQL Server 2014 SP2发布下载:数十项更新修复

    微软发布了数据库工具SQL Server 2014 SP2服务包下载,本次更新集合了数十项更新修复,涉及安全和功能性补丁,使用SQL Server 2014的用户应该及时安装该服务包. 文件内容 版本 ...