注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

itoedr的it学苑

记录从IT文盲学到专家的历程

 
 
 

日志

 
 

react native布局与移动应用开发的一点经验  

2016-09-06 15:16:06|  分类: html5-webapp |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

知识回顾:

Reactjs的原理         首先,我们知道reactjs是一个javascript的框架,也就依靠javascript自身与操作系统的API层来接受html环境的请求后交由javascript来接管理信息交给浏览器处理ui绘图与数据计算,其功能就是人们常说的一个定制化的编程构架。
       最重要的是,Reactjs引入了虚拟DOM(Virtual DOM,直接运行于内存之中,所以有了极高的性能)的机制:在浏览器端用Javascript实现了一套 DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React将当前整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分进行实际的浏览器DOM更新。
       毕竟reactjs框架是一个js的程序集,又是开源程序,我们可以仔细阅读分析Reactjs的实现思路。
       而且React能够批处理虚拟 DOM的刷新,在一个事件循环(Event Loop)内的两次数据变化会被合并,例如你连续的先将节点内容从A变成B,然后又从B变成A,React会认为UI不发生任何变化,而如果通过手动控制,这种逻辑通常是极其复杂的。尽管每一次都需要构造完整的虚拟DOM树,但是因为虚拟DOM是内存数据,性能是极高的,而对实际DOM进行操作的仅仅是 Diff部分,因而能达到提高性能的目的。这样,在保证性能的同时,开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素,而只需要 关心在任意一个数据状态下,整个界面是如何Render(渲染)的。

       移动应用的一个特点: 在web移动端通常会有这样的实际需求,毕竟移动应用的要全球移动,多为小屏设备。实现主屏多分三栏比较适合大家的习惯。上中下三栏布局(上下导航栏位置固定,中间部分内容超出可滚动),形式参考如下图示。

react native布局与移动应用开发的一点经验 - itoedr - itoedr的it学苑
 

优势:主题视觉区明确

网上的一个常规实现方法参考如下:

HTML结构:

<div class='container'>
    <div class='header'></div>
    <div class='content'></div>
    <div class='footer'></div>
</div>

首先可以利用fixed或者absolute定位,实现简单。

注:ubuntu设备提供的新的延展思路,使用自动隐藏的边际浮动扩展屏,将来会更好地展示移动html的作用的。

什么是webkit-box-flex?

       在css3之前要实现横列的web布局,通常就是float或者display:inline-block; 但是都不能做到真正的流体布局。至少width要自己去算百分比。flexible box 就可以实现真正意义上的流体布局。只要给出相应属性,支持css3的浏览器会帮我们做额外的计算,来实现其流动布局的作用。

提供的关于盒模型的几个属性:

box-orient                子元素排列 vertical or horizontal
box-flex                    兄弟元素之间比例,仅作一个系数
box-align                 box 排列
box-direction           box 方向
box-flex-group        以组为单位的流体系数
box-lines
box-ordinal-group    以组为单位的子元素排列方向

            另外一种利用-wekkit-box/flex的实现方法,实现上下两栏固定高度,中间高度自适应的布局。

CSS代码如下:

使用-webkit-box:

.container{
    width: 100%;
    height: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.header{
    height: 200px;
    background-color: red;
}
.content{
    -webkit-box-flex: 1;
    overflow: auto;
}
.footer{
    height: 200px;
    background-color: blue;    
}

使用flex:

.container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.header{
    height: 200px;
    background-color: red;
}
.content{
    flex: 1;
    overflow: auto;
}
.footer{
    height: 200px;
    background-color: blue;
}

         实际应用中应该将以上两种放在一起写,这里只是为了下文而将新旧两种写法分开。

         在react native中,实现样式只是CSS中的一个小子集,其中就使用flex的布局

         实现的思路和上面也是相同的,不过由于react native中对于View组件而言,overflow属性只有'visible'和'hidden'两个值( 默认是'hidden' ),并没有可滚动的属性,因此中间内容部分需要使用"ScrollView"滚动容器。

组件渲染:

render{
  return(
    <View style={styles.container}>
        <View style={styles.header}></View>
        <ScrollView style={styles.content}>
        </ScrollView>
        <View style={styles.footer}></View>
    </View>
  );
}        

样式:

const styles = StyleSheet.create({
  container: {
    flex: 1,
flexDirection: 'column' }, header: { height: 100, backgroundColor: 'red', }, content: { flex: 1, }, footer: { height: 100, backgroundColor: 'blue', } });
效果:

react native布局与移动应用开发的一点经验 - itoedr - itoedr的it学苑
 

react native最基础的布局就实现了。

  评论这张
 
阅读(30)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017