标签：
React Native采用一中全新的布局方式：FlexBox（弹性布局）。可以很方便的实现各种复杂布局，是全新的针对web和移动开发布局的一种实现方式。
何为FlexBox?
完整名称为：the flexible box Module,旨在通过弹性的方式来对齐和分布容器中的组件。Flexbuju的主要思想是：让容器有能力让其子项目能够改变其宽度|高度|顺序，以最佳方式填充可用空间。
在布局中，首先得确定主轴方向(flexDirection)，主轴组件的对齐方式（justifyContent），侧轴组件的对齐方式(alignItems)，通过以上四点可以基本确定布局。
FlexBox属性：
flexDirection:该属性确定了主轴方向，枚举值。
row 主轴方向为水平，起点在左端。
row- reverse 主轴方向为水平，起点在右端
column 主轴方向为垂直，起点在上端
column-reverse 主轴方向为垂直，起点在下端
justlfyContent:该属性确定了组件在主轴方向上的对齐方式，枚举值。
flex-start(默认) 组件沿着主轴方向的起始位置靠齐。如：假如主轴方向是row的话就是左对齐，是row- reverse的话就是右对齐，是column的话就是上对齐，是 column-reverse的话就是下对齐。
fle-end 组件沿着主轴方向的结束位置靠齐，和flex-start相反。
space-betweem 组件在主轴方向上两端对齐，其中的间隔相等。
space-around 组件会平均分配在主轴方向上，两端保留一定的位置空间。
alignsItems:组件在侧轴方向上的对齐方式。
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
标签：
原文地址：http://www.cnblogs.com/shaoting/p/5931901.html
