【ReactNative】react-native 布局

react-native 布局

---

1 flex布局基本概念

flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。采用flex布局的元素，称为flex容器（flexContainer），简称"容器"。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称"项目"。如下图所示：

容器默认存在两根轴：主轴（main axis）和交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

Flex布局与Android的线性布局（LinearLayout）有点类似，都可以设置布局方向，对齐方式，以及项目的布局占位权重，区别是flex容器中项目分布的总长度超出屏幕宽度，超出的那部分项目不可见，项目不会变形，或者可以设置flexWrap属性，让容器可以分行布局，所有项目都能显示出来。

2 flex基本属性

flex属性声明在：/node_modules/React-native/Libraries/StyleSheet/LayoutPropTypes.js

// https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
  flexDirection: ReactPropTypes.oneOf([
    'row','column'
  ]),// https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
  flexWrap: ReactPropTypes.oneOf([
    'wrap',68)">'nowrap'
  ]),38)">// How to align children in the main direction
  //developer.mozilla.org/en-US/docs/Web/CSS/justify-content
  justifyContent: ReactPropTypes.oneOf([
    'flex-start',68)">'flex-end',68)">'center',68)">'space-between',68)">'space-around'
  ]),136); font-weight:bold">in the cross direction
  //developer.mozilla.org/en-US/docs/Web/CSS/align-items
  alignItems: ReactPropTypes.oneOf([
    'stretch'
  ]),38)">// How to align the element alignSelf: ReactPropTypes.oneOf([
    'auto',38)">/developer.mozilla.org/en-US/docs/Web/CSS/flex
  flex: ReactPropTypes.number,

由上述代码，我们可以看到flex的属性并不多，而且很好记忆，以下将会一一介绍

flex属性可以分为容器属性和项目属性
其中容器属性包括：flexDirection，justifyContent，alignItems，flexWrap

项目属性包括：flex，alignSelf

以下介绍会使用到一些代码和图片，先定义两个简单组件，方便理解

//定义一个默认半径为20，颜色为#527fe4的圆组件 var Circle = React.createClass({ render : function(){ var size = this.props.size || 20; var color = this.props.color || '#527fe4'; return <View style={{backgroundColor:color,borderRadius:size/2,height:size,width:size,margin:1}}/> },}); //定义一个放置标题和项目的容器，传入的value属性将会是需要介绍的flex属性 var Value = React.createClass({ render : function(){ var value = <View> <Text style={styles.valueText}>{this.props.title}</Text> <{[styles.valueContainer,this.props.value]}> {this.props.children} </View> </View>; return value; },}); //定义一个数组放置5个圆 var children = [<Circle/>,<Circle/>];

2.1 容器属性

1. flexDirection：布局方向，决定主轴的方向，默认值是column，即纵向布局

   |值    |描述                 |
   |------|--------------------|
   |row   |横向布局，主轴为水平方向|
   |column|纵向布局，主轴为竖直方向|

   row：横向布局
   代码：
   

   <Value title='row' value={{flexDirection:'row'}}>
       {children}
   </Value>

   视图：
   

   justifyContent-flex-start.jpg 1057x86 10.2 KB

   column：纵向布局
   代码：
   

   'column' value={{flexDirection:'column'}}>
       {children}
   </Value>

   视图：
   

   flexDirection-cloumn.jpg 1061x374 12.9 KB