[Wondgirl]从零开始学React Native之FlexBox布局(三)

一.flexbox布局简介:

        flexbox是由伸缩容器和伸缩项目组成.任何一个元素都可以指定flexbox布局,伸缩容器的子元素可以称为伸缩项目,伸缩项目使用伸缩布局模型来排版.

        在默认情况下,伸缩容器由两根轴组成:主轴(main axis)和交叉轴(cross axis),主轴的开始位置叫main start,结束位置叫main end.交叉轴的开始位置叫cross start,交叉轴的结束位置叫cross end.伸缩项目在主轴上占据的空间叫main size.在交叉轴上占据的空间叫cross size.

二.改变主轴方向(fiexDirection)

默认为水平布局:

//flexDirection:'row'//水平布局(默认的)

垂直布局效果:

flexDirection:'column'//垂直布局

/**
* Sample React Native App
* https://github.com/facebook/react-native * @flow
*/

import React, { Component } from 'react';//引用react基础库
import {//导入react里相关控件
AppRegistry,//注册主键
StyleSheet,//布局
Text,//控件
View//控件
} from 'react-native';

export default class first extends Component {
render() {
return (

<View style={styles.container}>
<Text style={styles.text}>
1
</Text>
<Text style={styles.text}>
2
</Text>
<Text style={styles.text}>
3
</Text>
</View>
);
}
}
//flexbox布局
const styles = StyleSheet.create({//布局
container: {

//flexDirection:'row'//水平布局(默认的)
flexDirection:'column'//垂直布局
},
text:{
fontSize: 30,
color:'#ffffff',
backgroundColor:'#000000',
textAlign: 'center',
width:40,
height:40,
margin: 20//间距
}

});

AppRegistry.registerComponent('first', () => first);

/*入口类 注册主键(first得和appdelegate 里的 [RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"first"
initialProperties:nil
launchOptions:launchOptions];)]   moduleName一至

*/

三.水平折行(flexWrap)
     flexWrap:'wrap'//水平布局:自动换行 垂直布局:自动换列
四.[b]伸缩项(justifyContent)//水平布局:水平对齐方式 垂直布局:[b][b]垂直对齐方式[/b][/b][/b]
用来定义伸缩项目沿主轴线对齐方式.
以水平局方式为例:
1.左对齐:justifyContent:'flex-start'



2.右对齐:justifyContent:'flex-end'



3.居中对齐:justifyContent:'center'



4.分散对齐:justifyContent:'space-between'



5.justifyContent:'space-between'



五.alignItems(交叉轴的对刘方式)---只能在[b]垂直布局时用:[b]水平对齐方式[/b][/b]

   定义交叉轴的对齐方式  
1.左对齐(默认的):alignItems:'flex-start'



2.右对齐:alignItems:'flex-end'



3.居中:alignItems:'center'



4.并无效果(和默认一样):alignItems:'stretch' 



六.flex
    大于0的数值型的属性值,用于收缩项目向右尽可能扩展.设置比重.相当于Android的layou_weight,但与Android的layou_weight的值相反.
/**
* Sample React Native App
* https://github.com/facebook/react-native * @flow
*/

import React, { Component } from 'react';//引用react基础库
import {//导入react里相关控件
AppRegistry,//注册主键
StyleSheet,//布局
Text,//控件
View//控件
} from 'react-native';

export default class first extends Component {
render() {
return (

<View style={styles.container}>
<Text style={styles.text}>
1
</Text>
<Text style={styles.text}>
2
</Text>
<Text style={[styles.text,styles.match]}>
3
</Text>
<Text style={styles.text}>
4
</Text>
<Text style={styles.text}>
5
</Text>
<Text style={[styles.text,{flex:2}]}>
6
</Text>
<Text style={[styles.text,styles.match]}>
7
</Text>
<Text style={[styles.text,styles.match]}>
8
</Text>

</View>
);
}
}
//flexbox布局
const styles = StyleSheet.create({//布局
container: {

flexDirection:'row',//水平布局(默认的)
//flexDirection:'column',//垂直布局

flexWrap:'wrap',//水平布局:自动换行 垂直布局:自动换列
//justifyContent:'flex-start'//伸缩项:默认值 左对齐
//justifyContent:'flex-end'//伸缩项:右对齐
//justifyContent:'center'//伸缩项:居中对齐
//justifyContent:'space-between'//两端对齐
//justifyContent:'space-around'
//alignItems:'flex-start'
////alignItems:'flex-end'
//alignItems:'center'
},
text:{
fontSize: 30,
color:'#ffffff',
backgroundColor:'#000000',
textAlign: 'center',
width:40,
height:40,
margin: 20//间距
},
match:{
flex:1
}

});

AppRegistry.registerComponent('first', () => first);//入口类 注册主键(first得和appdelegate 里的 [RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
// moduleName:@"first"
// initialProperties:nil
// launchOptions:launchOptions];)] moduleName一至