从web移动端布局到react native布局
在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布局的更多相关文章
- 什么是 Native、Web App、Hybrid、React Native 和 Weex?(转载)
什么是 Native.Web App.Hybrid.React Native 和 Weex? 来源:zwwill_木羽 segmentfault.com/a/1190000011154120 一句 ...
- React Native布局
一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox. 在React Native中布局采用的是FleBox(弹性框)进行布局. FlexBox提供 ...
- Native、Web App、Hybrid、React Native(简称RN)、Weex 间的异同点。
App常用开发模式简介 此处App为应用application,并非我们通常讲的手机App. 常用的几种APP开发模式-脑图 Native App 传统的原生App开发模式,有iOS和aOS两大系统, ...
- react native 布局注意点
一.react native中很多是ES6语法. 1行.表示是js的严格模式. 'use strict';严格模式中变量必须先声明,然后赋值.定义等:还有就是this的绑定. 2行到8行.导入依赖,可 ...
- React Native布局详解
Flexbox 布局 Flex有两个属性:Container 和 Item flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.采用fle ...
- React Native布局实践:开发京东client首页(三)——轮播图的实现
上篇文章中,我们一起构建了京东client的TabBar.在本文中.将继续向大家介绍京东client首页轮播图及其下发功能button的开发方法,如今就让我们開始吧! 1.相关控件调研 眼下在Gith ...
- React Native 弹性布局FlexBox
React Native采用一中全新的布局方式:FlexBox(弹性布局).可以很方便的实现各种复杂布局,是全新的针对web和移动开发布局的一种实现方式. 何为FlexBox? 完整名称为:the f ...
- react native 之页面布局
第一章 flexbox 布局 1.flexDirection:'row', 水平 flexDirection:'column',垂直 需要在父元素上设置这种属性才能实现flex. flex:1 会撑 ...
- React Native初探
前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...
随机推荐
- Python Django 开发 3 数据库CURD
上一篇表建好后开始对数据进行CURD操作 dos输入: >>>python manage.py shell 以下的命令都是在shell中测试 (C)增: >>>im ...
- 解决git中文乱码
和linux平台一样,在默认设置下,文件名称中包含中文的文件,在工作区状态输出.查看历史更改概要,以及在补丁文件中,文件名中的中文不能正确的显示,而是用若干八进制字符编码来显示,如下: git sta ...
- [Node.js] BDD和Mocha框架
原文地址:http://www.moye.me/2014/11/22/bdd_mocha/ 引子 今天造了个轮子:写了个深拷贝任意JavaScript对象的模块(事实上npm上已经有类似的模块,纯造轮 ...
- 基于Solr实现HBase的二级索引
文章来源:http://www.open-open.com/lib/view/open1421501717312.html 实现目的: 由于hbase基于行健有序存储,在查询时使用行健十分高效,然后想 ...
- nodejs morgan包
新建app.js var express = require('express') var logger = require('morgan') var app = express() app.use ...
- 负载均衡服务器session共享的解决方案 (转载)
http://luanzhz.blog.163.com/blog/static/58023129201101811445262/ 在ASP.NET的程序中要使用Session对象时,必须确保页面的@p ...
- WCF回顾一、基本概念和应用场景
一.WCF描述 wcf是一款基于面向服务的架构的通讯框架平台,在分布式框架中得到了广泛使用. wcf入门非常简单,只要花几分钟就能编写一个完整的wcf程序,而实际上WCF是概念非常多的一门技术,需要花 ...
- 【Win10】【Win2D】实现控件阴影效果
学过 WPF 的都知道,在 WPF 中,为控件添加一个阴影效果是相当容易的. <Border Width="100" Height="100" Backg ...
- 暴力 + 贪心 --- Codeforces 558C : Amr and Chemistry
C. Amr and Chemistry Problem's Link: http://codeforces.com/problemset/problem/558/C Mean: 给出n个数,让你通过 ...
- 因用了NeatUpload大文件上传控件而导致Nonfile portion > 4194304 bytes错误的解决方法
今天遇到一个问题,就是“NeatUpload大文件上传控件而导致Nonfile portion > 4194304 bytes错误”,百度后发现了一个解决方法,跟大家分享下: NeatUploa ...