React Native采用一中全新的布局方式:FlexBox(弹性布局)。可以很方便的实现各种复杂布局,是全新的针对web和移动开发布局的一种实现方式。

何为FlexBox?

完整名称为:the flexible box Module,旨在通过弹性的方式来对齐和分布容器中的组件。Flexbuju的主要思想是:让容器有能力让其子项目能够改变其宽度|高度|顺序,以最佳方式填充可用空间。

在布局中,首先得确定主轴方向(flexDirection),主轴组件的对齐方式(justifyContent),侧轴组件的对齐方式(alignItems),通过以上四点可以基本确定布局。

FlexBox属性:

flexDirection:该属性确定了主轴方向,枚举值。

    row         主轴方向为水平,起点在左端。

    row- reverse      主轴方向为水平,起点在右端

    column(默认)    主轴方向为垂直,起点在上端

    column-reverse        主轴方向为垂直,起点在下端

justifyContent:该属性确定了组件在主轴方向上的对齐方式,枚举值。

    flex-start(默认)   组件沿着主轴方向的起始位置靠齐。如:假如主轴方向是row的话就是左对齐,是row- reverse的话就是右对齐,是column的话就是上对齐,是 column-reverse的话就是下对齐。

    flex-end            组件沿着主轴方向的结束位置靠齐,和flex-start相反。

    space-between  组件在主轴方向上两端对齐,其中的间隔相等。

    space-around   组件会平均分配在主轴方向上,两端保留一定的位置空间。

alignItems:组件在侧轴方向上的对齐方式。

    flex-start         组件沿着侧轴上的起点对齐

    flex-end          组件沿着侧轴上的终点对齐

    center      组价在侧轴方向上居中对齐

    stretch(默认)  组件在侧轴方向上占满

flexWrap: 是否换行

默认情况下,项目都排列在一条线上,放不下的部分则不放置,flexWap就是定义是否换行的。

    nowrap(默认)   不换行

    wrap            换行,第一行在上方

    wrap-reverse    换行,第一行在下方

flex:有三个参数,默认参数为 0 1 auto。  第一个参数为flex-grow,第二,第三个为:flex-shrink和flex-basis。

alignSelf:定义单个组件自己的对齐方式,默认为auto。枚举值:auto|flex-start|flex-end|center|baseline|stretch

position:枚举值,absolute绝对定位,relative相对定位

margin:内边距

padding:外边距

/**
* Sample React Native App
* https://github.com/facebook/react-native
* 周少停 2016-09-12
* 弹性布局 flex-box
*/ import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native'
/**-----------------------------------第一个示例程序----------------------------------------------------- **/
class Project extends Component {
render() { //初始化
return (
<View style={styles.container}>
<Text style={{backgroundColor:'red',height:50}}>第一个</Text>
<Text style={{backgroundColor:'blue',height:100}}>第二个</Text>
<Text style={{backgroundColor:'green',height:160}}>第三个</Text>
<Text style={{backgroundColor:'yellow',height:200}}>第四个</Text>
</View>
);
}
}
//样式
const styles = StyleSheet.create({
container: {
// flex:1, //充满全屏,否则内容多少,只显示多少区域. 是'flex-grow''flex-shrink''flex-basis'三个属性的缩写,其中第二个和第三个参数都是可选,默认值是"0 1 auto" 宽度 = 弹性宽度 * (flexGrow/sum(flexGrow))
// width:200,
height:200,
marginTop:20,//上边距
backgroundColor:'black',//背景色
flexDirection:'row', //React Native 布局采用FlexBox(弹性布局),该属性是设置布局的主轴方向为row:横向(默认方向是竖向:column)
justifyContent:'space-between', //定义了伸缩项目在主轴线的对齐方式 flex-start | flex-end | center | space-between | space-around
alignItems:'flex-start' //定义了伸缩项目在侧轴(交叉轴)的对齐方式 flex-start | flex-end | center | baseline | stretch(默认)
}
}); /**-----------------------------------第二个示例程序----------------------------------------------------- **/
class Project1 extends Component {
render() { //初始化
return (
<View style={styles1.container}>
<Text style={{backgroundColor:'red',width:200}}>第一个</Text>
<Text style={{backgroundColor:'blue',width:300}}>第二个</Text>
<Text style={{backgroundColor:'green',width:200}}>第三个</Text>
<Text style={{backgroundColor:'yellow',width:200}}>第四个</Text>
</View>
);
}
}
const styles1 = StyleSheet.create({
container:{
backgroundColor:'black',
marginTop:20,
flexDirection:'row',
justifyContent:'flex-start',
flexWrap:'wrap' //定义显示不下的显示模式,默认情况下,控件都是在一条线上 wrap换行 nowarp(默认值)不换行 warp-reverse:换行,效果和wrap相反
}
});
/**-----------------------------------第三个示例程序----------------------------------------------------- **/
//alignSelf允许单个项目可以有自己单独的对齐方式
class Project2 extends Component{
render(){
return(
<View style={styles2.container}>
<Text style={{backgroundColor:'red',flex:1,height:50,alignSelf:'center'}}>第一个</Text>
<Text style={{backgroundColor:'blue',flex:2,height:30,alignSelf:'flex-start'}}>第二个</Text>
<Text style={{backgroundColor:'green',flex:2,height:70,alignSelf:'flex-end'}}>第三个</Text>
<Text style={{backgroundColor:'yellow',flex:1,height:80,alignSelf:'stretch'}}>第四个</Text>
</View>
);
}
}
const styles2 = StyleSheet.create({
container:{
backgroundColor:'black',
marginTop:20,
flexDirection:'row'
}
}); AppRegistry.registerComponent('Project', () => Project2); //注册

  完整源码下载:https://github.com/pheromone/React-Native-1

React Native 弹性布局FlexBox的更多相关文章

  1. 3、手把手教React Native实战之flexbox布局

    flexbox是Flexible Box的缩写,弹性盒子布局  主流的浏览器都支持 flexbox布局是伸缩容器(container)和伸缩项目(item)组成 Flexbox布局的主体思想是元素可以 ...

  2. 4、手把手教React Native实战之flexbox布局(伸缩属性)

    ###伸缩项目的属性 1.order 定义项目的排列顺序,数值越小,排列越靠前,默认值为0,语法为:order:整数值 2.flex-grow 定义伸缩项目的放大比例,默认值为0,即表示如果存在剩余空 ...

  3. React Native入门——布局实践:开发京东client首页(一)

    有了一些对React Native开发的简单了解,让我们从实战出发.一起来构建一个简单的京东client. 这个client是仿照之前版本号的京东client开发的Android版应用,来源于CSDN ...

  4. React Native入门 认识Flexbox布局

    Flexbox布局是由W3C在09年提出的在Web端取代CSS盒子模型的一种布局方式. ReactNative实现了Flexbox布局的大部分功能. Flexbox布局所使用的属性,基本可以分为两大类 ...

  5. React Native 开发之 (05) flexbox布局

    一  flexbox布局 1 flex布局 flexbox是ReactNative 应用开发中必不可少的内容,也是最常用的内容. 传统的页面布局是基于盒子模型,依赖定位属性,流动属性和显示属性来解决. ...

  6. React Native基础&入门教程:初步使用Flexbox布局

    在上篇中,笔者分享了部分安装并调试React Native应用过程里的一点经验,如果还没有看过的同学请点击<React Native基础&入门教程:调试React Native应用的一小 ...

  7. React Native - FlexBox弹性盒模型

    FlexBox布局 1. 什么是FlexBox布局?   弹性盒模型(The Flexible Box Module),又叫FlexBox,意为"弹性布局",旨在通过弹性的方式来对 ...

  8. 一起来点React Native——你必须要会点FlexBox布局

    一.FlexBox布局 1.1 FlexBox是什么意思呢? flexible(形容词):能够伸缩或者很容易变化,以适应外界条件的变化 box(名词):通用的矩形容器 1.2  什么是FlexBox布 ...

  9. React Native混合开发中必须要学会点FlexBox布局

    在前面的案例中,界面的搭建都是采用CSS的布局,基于盒子模型,依赖 display属性 , position属性, float属性.但对于那些特殊布局非常不方便,比如,垂直居中. 一种全新的针对web ...

随机推荐

  1. 笔记2:傻瓜式盗QQ程序

    1.一个简单的盗QQ号的方法 仿做一个QQ的窗体 PS:当然里面有用的控件只有两个输入框和一个登陆按钮,其他的尽量做得像一些吧! 点登陆时的后台代码: PS:需要导入两个包:using System. ...

  2. C++中静态数据成员

    类的静态成员不能由类的构造函数来初始化.因为即使不存在类的任何对象时,类的静态成员依然存在并且可以被使用.类的静态成员也不能访问任何类的非静态成员. 类名和类对象都可以直接调用静态数据成员.因为静态数 ...

  3. Android客户端向服务器端发送数据的流程(1)

    原理: android客户端通过使用org.apache.http.impl.client.DefaultHttpClient类来发送数据; 方法介绍: HttpClient是android中提供的一 ...

  4. (转)codeblock(常用快键)

    一款开源的C/C++ IDE(集成开发环境),基于wxWidgets GUI体系,跨平台支持. 编辑器 快捷键 功能 Ctrl+Z 恢复上一次操作 Ctrl+Shift+Z 重复上一次操作 F11 切 ...

  5. form程序的界面修改

    做主题视频库的界面的修改工作,是b/s端的窗口,是由form窗口生成,如下截图: 主要有三个方面,1.左侧菜单栏宽度固定,不随整个窗口大变化而变化.2.导出excel按钮的位置的移动,不管整个窗口是变 ...

  6. 20145236 冯佳 《Java程序设计》第1周学习总结

    20145236 冯佳 <Java程序设计>第1周学习总结 教材学习内容总结 因为假期在家的时候并没有提前自学Java,所以,这周算是真正开始第一次接触Java.我对Java的了解也仅仅停 ...

  7. Eclipse添加jsp页面后引入java指令报错解决方法

    新建jsp页面老提示: Multiple annotations found at this line: - The superclass "javax.servlet.http.HttpS ...

  8. java面向对象编程——第五章 对象的行为

    5.1 方法调用栈 当一个方法被调用时,将导致控制流程跳转到被调用的方法.然后,控制流程执行方法中的语句.当然,被执行的方法可能会调用其它方法,导致控制流程跳转到其它方法.所有的方法调用都维护在一个称 ...

  9. 161018--NOIP模拟

    老实说,感觉自己好菜啊..(安慰自己省选做多了 T1:看似1e6很大,实际上常数52都能草过去...不知为何RE.. T2:记忆化搜索.看错题目条件QAQ,其实把自己暴力搜的程序改改就好了.. T3: ...

  10. 最新电Call记录统计-full hash join用法

    declare @time datetime set @time='2016-07-01' --最新的电Call记录统计查询--SELECT t.zuoxi1,t.PhoneCount,t.Phone ...