React-Native布局

引用参考链接:
https://segmentfault.com/a/1190000002658374
http://justcode.ikeepstudying.com/2015/10/css3-flex-弹性布局用法详解/
http://reactnative.cn/docs/0.31/layout-props.html#content
1.flex

flex:1

"flex是display的一个属性值。与之相当应的还有一个是inline-flex。

2.设置了Flex布局后，子元素的float，clear，还有verticle-align属性都不起作用。

3.设置了display:flex属性的元素，称为Flex容器，他里面的所有子元素统称为容器成员，称为Flex项目。后面我们就使用Flex容器和 Flex项目来进行介绍。 Flex容器有两根坐标轴：水平的叫主轴（main axis）和垂直的叫交叉轴（cross axis）。"
在React-native中：

flex number 

In React Native flex does not work the same way that it does in CSS. flex is a number rather than a string, and it works according to the css-layout library at https://github.com/facebook/css-layout .

When flex is a positive number, it makes the component flexible and it will be sized proportional to its flex value. So a component with flex set to 2 will take twice the space as a component with flex set to 1.

When flex is 0, the component is sized according to width and height and it is inflexible.

When flex is -1, the component is normally sized according width and height. However, if there's not enough space, the component will shrink to its minWidth and minHeight.

2.属性
主轴，副轴：justifyContent,alignItems
实例：
默认排列：

class ReactStyle extends Component {  
render() {   
   return (      
  <View style={styles.container}>        
         <View style={{width:100,height:100,backgroundColor:'red'}}>
         </View>        
         <View  style={{width:100,height:100, backgroundColor:'green'}}>  
         </View>        
         <View style={{width:100,height:100, backgroundColor:'blue'}}> 
         </View>      
         </View>    
    );  
}}
const styles = StyleSheet.create({  
        container: {    flex: 1,  },
});

效果：

3AE83A42-8827-4E8C-B25D-792E61670CE5.png

横向排列：

container: {  flex: 1,  flexDirection:'row',},

效果：

75631A2C-4375-4415-8CB2-589BCE3E5CD8.png

横向均匀分布1：

container: {  
flex: 1,  
flexDirection:'row', 
 justifyContent:'space-between'
},

效果：

4B9B053A-DED2-4868-BCFC-03EB28716F0B.png

container: {  
flex: 1,  
flexDirection:'row',  
justifyContent:'space-around'
},

ACB83FAB-18AE-4E51-A022-9AB51FB81A8E.png

container: {  
flex: 1,  
flexDirection:'row', 
 justifyContent:'center'
},

4FA157F8-19B2-4C1D-96C3-817E17F2671A.png

container: {  
flex: 1,  
flexDirection:'row', 
 justifyContent:'flex-start'
},

46A8DD1E-9A0F-46E3-94DA-DBEE141495E6.png

container: {  
flex: 1,  
flexDirection:'row', 
 justifyContent:'flex-end'
},

535E9724-0C18-4CAC-ABA0-A7D06832F107.png

alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch') 
alignSelf controls how a child aligns in the cross direction, overriding the alignItems of the parent. It works like align-self in CSS. See https://css-tricks.com/almanac/properties/a/align-self/ for more detail.

container: {  
    flex: 1,  
    flexDirection:'row',  
    justifyContent:'space-around',  
    alignItems:'center'
},
item:{  
    alignSelf:'flex-end',
},

作用于副轴单个元素效果：

D41EBD40-E893-4380-904C-D778A05A6534.png