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