[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'//水平布局:自动换行 垂直布局:自动换列

四.伸缩项(justifyContent)//水平布局:水平对齐方式 垂直布局:垂直对齐方式

用来定义伸缩项目沿主轴线对齐方式.

以水平局方式为例:

1.左对齐:justifyContent:'flex-start'

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

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

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

5.justifyContent:'space-between'

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

   定义交叉轴的对齐方式  

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一至