在web移动端通常会有这样的需求,实现上中下三栏布局(上下导航栏位置固定,中间部分内容超出可滚动),如下图所示:

实现方法如下:

HTML结构:

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

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

现在介绍另外一种方法——利用-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:;
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:;
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最基础的布局就实现了。

由于react native中布局方法基本就这两种: flex和absolute布局,掌握了flex布局,也就基本搞定了。

从web移动端布局到react native布局的更多相关文章

  1. 什么是 Native、Web App、Hybrid、React Native 和 Weex?(转载)

    什么是 Native.Web App.Hybrid.React Native 和 Weex?   来源:zwwill_木羽 segmentfault.com/a/1190000011154120 一句 ...

  2. React Native布局

    一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox. 在React Native中布局采用的是FleBox(弹性框)进行布局. FlexBox提供 ...

  3. Native、Web App、Hybrid、React Native(简称RN)、Weex 间的异同点。

    App常用开发模式简介 此处App为应用application,并非我们通常讲的手机App. 常用的几种APP开发模式-脑图 Native App 传统的原生App开发模式,有iOS和aOS两大系统, ...

  4. react native 布局注意点

    一.react native中很多是ES6语法. 1行.表示是js的严格模式. 'use strict';严格模式中变量必须先声明,然后赋值.定义等:还有就是this的绑定. 2行到8行.导入依赖,可 ...

  5. React Native布局详解

    Flexbox 布局 Flex有两个属性:Container  和 Item flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.采用fle ...

  6. React Native布局实践:开发京东client首页(三)——轮播图的实现

    上篇文章中,我们一起构建了京东client的TabBar.在本文中.将继续向大家介绍京东client首页轮播图及其下发功能button的开发方法,如今就让我们開始吧! 1.相关控件调研 眼下在Gith ...

  7. React Native 弹性布局FlexBox

    React Native采用一中全新的布局方式:FlexBox(弹性布局).可以很方便的实现各种复杂布局,是全新的针对web和移动开发布局的一种实现方式. 何为FlexBox? 完整名称为:the f ...

  8. react native 之页面布局

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

  9. React Native初探

    前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...

随机推荐

  1. Python Django 开发 3 数据库CURD

    上一篇表建好后开始对数据进行CURD操作 dos输入: >>>python manage.py shell 以下的命令都是在shell中测试 (C)增: >>>im ...

  2. 解决git中文乱码

    和linux平台一样,在默认设置下,文件名称中包含中文的文件,在工作区状态输出.查看历史更改概要,以及在补丁文件中,文件名中的中文不能正确的显示,而是用若干八进制字符编码来显示,如下: git sta ...

  3. [Node.js] BDD和Mocha框架

    原文地址:http://www.moye.me/2014/11/22/bdd_mocha/ 引子 今天造了个轮子:写了个深拷贝任意JavaScript对象的模块(事实上npm上已经有类似的模块,纯造轮 ...

  4. 基于Solr实现HBase的二级索引

    文章来源:http://www.open-open.com/lib/view/open1421501717312.html 实现目的: 由于hbase基于行健有序存储,在查询时使用行健十分高效,然后想 ...

  5. nodejs morgan包

    新建app.js var express = require('express') var logger = require('morgan') var app = express() app.use ...

  6. 负载均衡服务器session共享的解决方案 (转载)

    http://luanzhz.blog.163.com/blog/static/58023129201101811445262/ 在ASP.NET的程序中要使用Session对象时,必须确保页面的@p ...

  7. WCF回顾一、基本概念和应用场景

    一.WCF描述 wcf是一款基于面向服务的架构的通讯框架平台,在分布式框架中得到了广泛使用. wcf入门非常简单,只要花几分钟就能编写一个完整的wcf程序,而实际上WCF是概念非常多的一门技术,需要花 ...

  8. 【Win10】【Win2D】实现控件阴影效果

    学过 WPF 的都知道,在 WPF 中,为控件添加一个阴影效果是相当容易的. <Border Width="100" Height="100" Backg ...

  9. 暴力 + 贪心 --- Codeforces 558C : Amr and Chemistry

    C. Amr and Chemistry Problem's Link: http://codeforces.com/problemset/problem/558/C Mean: 给出n个数,让你通过 ...

  10. 因用了NeatUpload大文件上传控件而导致Nonfile portion > 4194304 bytes错误的解决方法

    今天遇到一个问题,就是“NeatUpload大文件上传控件而导致Nonfile portion > 4194304 bytes错误”,百度后发现了一个解决方法,跟大家分享下: NeatUploa ...