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. 原生JavaScript实现mouseenter

    mouseenter和Mouseleave都是jquery的事件,JavaScript的mouseover和mouseout每个子元素都会触发,从子元素移到父元素也会触发,用起来不很方便,而且触发的太 ...

  2. XPath 语法示例

    参考:http://www.w3school.com.cn/xpath/xpath_syntax.asp XPath 使用路径表达式来选取 XML 文档中的节点或节点集.节点是通过沿着路径 (path ...

  3. AES加密 16进制与二进制转换

    import java.security.Key; import javax.crypto.Cipher; import javax.crypto.KeyGenerator; import javax ...

  4. UTF-8

    UTF-8(8-bit Unicode Transformation Format)是一种针对Unicode的可变长度字符编码,又称万国码.由Ken Thompson于1992年创建.现在已经标准化为 ...

  5. HDU 2795 单点更新,区间优先查找(想法)

    Billboard Time Limit: 20000/8000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  6. hdu 4638 Group

    http://acm.hdu.edu.cn/showproblem.php?pid=4638 问题其实就是求[L,R]中有多少个连续的段 若每一个人都是一个段 那么[L,R]中每一个朋友关系就会减少一 ...

  7. ASP.NET 学习笔记

    1.ASP.NET 服务器控件是可被服务器理解的标签 有三种类型的服务器控件(所有服务器控件必须出现在 <form> 标签内,同时 <form> 标签必须包含 runat=&q ...

  8. 常见的Web负载均衡方法

    用户手动选择 通过在主站首页入口提供不同线路,不同服务器链接的方式,来实现负载均衡.在一些提供下载业务的网站中比较常见,如:华军软件园. DNS轮询 大多域名注册商都支持对同一主机名添加多条A记录,这 ...

  9. android 录音的断点续传

    系统没有暂停的功能  只能把每次的录音进行拼接... package com.example.zrecord; import java.io.File;import java.io.FileInput ...

  10. PHP及Javascript 正则判断中文(转)

    UTF-8匹配: 在javascript中,要判断字符串是中文是很简单的.比如: var str = "php编程"; if (/^[\u4e00-\u9fa5]+$/.test( ...