React Native FlexBox布局

一、FlexBox布局
1、FlexBox什么是什么意思呢？
flexible(形容词)：能够伸缩或者很容易变化，以适应外界条件的变化
box（名词）：通用的矩形容器
2、什么是FlexBox布局？
弹性盒模型(The FlexiBle Box Module),又叫Flexbox,意为“弹性布局”，旨在
通过弹性的方式来对齐和分布容器中内容的控件，使其能适应不同屏幕，为盒装模型提供最大的灵活性。
 Flex布局主要思想是：让容器有能力让其子项目能够改变其宽度，高度(甚至是顺序)，
以最佳方式填充可用空间：
React Native中的FlexBox是这个规范的一个子集。

二、flexbox在开发过程中的应用场景
2.1、FlexBox在布局中能够解决什么问题？
浮动布局
各种机型屏幕的适配
水平和垂直居中
自动分配宽度
......

三、Flexbox的常用属性
3.1容器属性
a).flexDirection:'row|row-reverse|column|column-reverse'
该属性决定主轴的方向(即项目的排列方向)。
row:主轴为水平方向，起点在左端。
row-reverse:主轴为水平方向，起点在右端。
column(默认值)：主轴为垂直方向，起点在上沿。
column-reverse:主轴为垂直方向，起点在下沿。

注释：
{/*要注释的内容*/}

b)justifyContent:'flex-start|flex-end|center|space-between|space-around'
定义了伸缩项目在主轴线的对齐方式
flex-start(默认值)：伸缩项目一行的起始位置靠齐
flex-end:伸缩项目向一行的结束位置靠齐
center:伸缩项目向一行的中间位置靠齐。
space-between:两端对齐，项目之前的间隔相等。
space_around:伸缩项目会平均地分布在行里，连段保留一半的空间。

c)alignItems:'flex-start|flex-end|center|baseline|stretch'
定义项目在交叉轴上如何对齐，可以把其想象成侧轴(垂直于主轴)的“对齐方式”。
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline:项目的第一行文字的基线对齐。
stretch:(默认值)：如果项目未设置高度或设为auto,将占满整个容器的高度。

d)flexWrap:'nowrap|wrap|wrap_reverse'
默认情况下，项目都排在一条线（又称“轴线”）上。flex-wrap属性定义，如果一条轴线
排不下，如何换行。

import React, { Component } from 'react';
import { Text,StyleSheet, View } from 'react-native';


 
export default class FirstProject extends Component {
  render() {
    return (
      <View style={styles.container}>
        {/*<Text>其实我是存在的</Text>*/}
        <View style={styles.innerViewStyle}>
         <Text>我是在里边的View</Text>
        </View>
        <View style={styles.innerViewStyle2}>
         <Text>我是在里边的下面View</Text>
        </View>

         
      </View>
    );
  }
}
const styles=StyleSheet.create({
  container:{
   // flex:1,
   backgroundColor:'red',
   width:300,
   height:100,
   //改变主轴方向--》默认是竖向
   flexDirection:'row'
  },
  innerViewStyle:{
    backgroundColor:'green',
    width:100
  },
  innerViewStyle2:{
    backgroundColor:'yellow',
    width:100
  },
});

运行如下：

FlexBox默认布局

import React, { Component } from 'react';
import { Text,StyleSheet, View } from 'react-native';

export default class FirstProject extends Component {
  render() {
    return (
      <View style={styles.container}>
         <Text style={{backgroundColor:'red'}}>第一个</Text>
         <Text style={{backgroundColor:'yellow'}}>第二个</Text>
         <Text style={{backgroundColor:'green'}}>第三个</Text>
         <Text style={{backgroundColor:'blue'}}>第四个</Text>
      </View>
    );
  }
}
const styles=StyleSheet.create({
  container:{
   backgroundColor:'purple'

  }
});

如下：

FlexBox改变主轴方向

import React, { Component } from 'react';
import { Text,StyleSheet, View } from 'react-native';

export default class FirstProject extends Component {
  render() {
    return (
      <View style={styles.container}>
         <Text style={{backgroundColor:'red'}}>第一个</Text>
         <Text style={{backgroundColor:'yellow'}}>第二个</Text>
         <Text style={{backgroundColor:'green'}}>第三个</Text>
         <Text style={{backgroundColor:'blue'}}>第四个</Text>
      </View>
    );
  }
}
const styles=StyleSheet.create({
  container:{
   backgroundColor:'purple',
   //改变主轴方向
   flexDirection:'row'

  }
});

如下图：

FlexBox上边距：

import React, { Component } from 'react';
import { Text,StyleSheet, View } from 'react-native';

export default class FirstProject extends Component {
  render() {
    return (
      <View style={styles.container}>
         <Text style={{backgroundColor:'red'}}>第一个</Text>
         <Text style={{backgroundColor:'yellow'}}>第二个</Text>
         <Text style={{backgroundColor:'green'}}>第三个</Text>
         <Text style={{backgroundColor:'blue'}}>第四个</Text>
      </View>
    );
  }
}
const styles=StyleSheet.create({
  container:{
   backgroundColor:'purple',
   //上边距
   marginTop:25,
   //改变主轴方向
   flexDirection:'row'

  }
});

如下图：

设置主轴线的对齐方式

import React, { Component } from 'react';
import { Text,StyleSheet, View } from 'react-native';

export default class FirstProject extends Component {
  render() {
    return (
      <View style={styles.container}>
         <Text style={{backgroundColor:'red'}}>第一个</Text>
         <Text style={{backgroundColor:'yellow'}}>第二个</Text>
         <Text style={{backgroundColor:'green'}}>第三个</Text>
         <Text style={{backgroundColor:'blue'}}>第四个</Text>
      </View>
    );
  }
}
const styles=StyleSheet.create({
  container:{
   backgroundColor:'purple',
   //上边距
   marginTop:25,
   //改变主轴方向
   flexDirection:'row',
   //设置主轴的对齐方式
   justifyContent:'flex-start'

  }
});

//设置主轴的对齐方式

justifyContent:'flex-start'

//设置主轴的对齐方式

justifyContent:'space-between'

//设置主轴的对齐方式

justifyContent:'space-around'

//设置主轴的对齐方式

justifyContent:'flex-end'

//设置主轴的对齐方式

justifyContent:'center'

//设置高度

    <View style={styles.container}>
         <Text style={{backgroundColor:'red',height:30}}>第一个</Text>
         <Text style={{backgroundColor:'yellow',height:40}}>第二个</Text>
         <Text style={{backgroundColor:'green',height:50}}>第三个</Text>
         <Text style={{backgroundColor:'blue',height:60}}>第四个</Text>
      </View>

flex-end:交叉轴的终点对齐

flex-start:交叉轴的起点对齐。

center:交叉轴的中点对齐。

flexWrap:显示不下，换一行

3.2元素属性
a)flex
 "flex-row","flex-shrink"和“flex-basis”三个属性的缩写，其中第二个和第三个参数(flex-shrink,flex-basis)是可选参数。
默认值为“0 1 auto”
宽度 = 弹性宽度 * (flexGrow/sum(flexGrow))

export default class FirstProject extends Component {
  render() {
    return (
      <View style={styles2.container}>
         <Text style={{backgroundColor:'red',flex:1}}>第一个</Text>
         <Text style={{backgroundColor:'yellow'}}>第二个</Text>
         <Text style={{backgroundColor:'green'}}>第三个</Text>
         <Text style={{backgroundColor:'blue'}}>第四个</Text>
      </View>
    );
  }
}

b)alignSelf:"auto|flex-start|flex-end|center|baseline|stretch"
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值auto,表示
继承父类元素的align-items属性。如果没有父元素，则等同于stretch

在React Native中使用Flexbox
4.1获取当前屏幕的宽度、高度、分辨率
获取系统Dimensions类库
var Dimensions=require('Dimensions');
var{width,height,scale}=Dimensions.get('window');

//引入
var Dimentsions=require('Dimensions');

export default class FirstProject extends Component {
  render() {
    return (
      <View style={styles3.outViewStyle}>
      <Text>当前屏幕的宽度：{Dimentsions.get('window').width}</Text>
      <Text>当前屏幕的高度：{Dimentsions.get('window').height}</Text>
      <Text>当前屏幕的分辨率：{Dimentsions.get('window').scale}</Text>
      </View>
    );
  }
}
const styles3=StyleSheet.create({
  outViewStyle:{
    //占满屏幕
    flex:1,
   //设置主轴方向居中
   justifyContent:'center',
   //设置侧轴的方向居中
   alignItems:'center',
   //背景
   backgroundColor:'red'

  }
});