React-Native - FlexBox布局

2017-07-09

弹性盒模型（The Flexible Box Module）,又叫Flexbox，意为“弹性布局”，旨在通过弹性的方式来对齐和分布容器中内容的空间，使其能适应不同屏幕，为盒装模型提供最大的灵活性，Flexbox可以在不同屏幕尺寸上提供一致的布局结构。

在React-Native使用FlexBox布局能够大大提升我们的开发效率FlexBox能做的有

适配屏幕；
快速垂直和水平居中
自动分配宽度和高度。

###一、主轴和侧轴，标志着在主轴和侧轴上的布局方式，在React-Native中默认的主轴方式是竖直的，当然，也可以根据需要选择合适的对齐方式。

###二、常见的属性

（1）. flexDirection：（row | column）

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

export default class untitled extends Component {
    render() {
        return (
            <View style={styles.container}>

              <Text style={{backgroundColor:'red'}} >测试一</Text>
              <Text style={{backgroundColor:'yellow'}}>测试二</Text>
              <Text style={{backgroundColor:'gray'}}>测试三</Text>
              <Text style={{backgroundColor:'blue'}}>测试四</Text>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
          backgroundColor:'skyblue',
      marginTop:100,
    }
});

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

看结果可知默认是竖直的

把样式代码改一下

const styles = StyleSheet.create({
    container: {
      backgroundColor:'skyblue',
      marginTop:100,
        flexDirection:'row', //添加了这行
    }
});

（2）. justifyContent：（flex-start、center、flex-end、space-around以及space-between）来控制主轴的布局样式

我们分别来试试这个属性

flex-start 默认就是这个样式

const styles = StyleSheet.create({
    container: {
      backgroundColor:'skyblue',
      marginTop:100,
      flexDirection:'row',
    justifyContent:'flex-start',
    }
});

center居中

flex-end

space-around 表示单个元素周边的间距注意对比space-between

space-between表示两个元素之间注意对比space-around

（3）. alignItems（flex-start、center、flex-end以及stretch）这个是用来控制侧轴方向的对齐方式的，此时的侧轴是Y轴

我们再来吧代码改一下

export default class untitled extends Component {
    render() {
        return (
            <View style={styles.container}>

              <Text style={{backgroundColor:'red',height:80}} >测试一</Text>
              <Text style={{backgroundColor:'yellow',height:90}}>测试二</Text>
              <Text style={{backgroundColor:'gray',height:50}}>测试三</Text>
              <Text style={{backgroundColor:'blue',height:100}}>测试四</Text>

            </View>
        );
    }
}

给每个item都加上一个高度也就是默认flex-start的显示

center

flex-end

stretch

注意：要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸。以下面的代码为例：只有将子元素样式中的width: 50去掉之后，alignItems: ‘stretch’才能生效。

export default class untitled extends Component {
    render() {
        return (
            <View style={styles.container}>

              <Text style={{backgroundColor:'red'}} >测试一</Text>
              <Text style={{backgroundColor:'yellow'}}>测试二</Text>
              <Text style={{backgroundColor:'gray'}}>测试三</Text>
              <Text style={{backgroundColor:'blue'}}>测试四</Text>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
      backgroundColor:'skyblue',
      marginTop:100,
      flexDirection:'row',
        alignItems:'stretch',
        height:100,

    }
});

（4）. flexWrap（nowrap | wrap）,这个是用来当主轴显示不下的时候该怎么显示的

nowrap，默认不换行

wrap，显示不下换行

export default class untitled extends Component {
    render() {
        return (
            <View style={styles.container}>

              <Text style={{backgroundColor:'red',width:90}} >测试一</Text>
              <Text style={{backgroundColor:'yellow',width:100}}>测试二</Text>
              <Text style={{backgroundColor:'gray',width:200}}>测试三</Text>
              <Text style={{backgroundColor:'blue',width:300}}>测试四</Text>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
      backgroundColor:'skyblue',
      marginTop:100,
      flexDirection:'row',
        alignItems:'stretch',
        flexWrap:'wrap',

    }
});

（5）. flex控制显示范围的

宽度＝弹性宽度 * ( flexGrow / sum( flexGorw ) )

flexGrow是占的份额，sum( flexGorw )是总的份额，也就是对应元素在父控件位置所占的比例

export default class untitled extends Component {
    render() {
        return (
            <View style={styles.container}>

              <Text style={{backgroundColor:'red',flex:1}} >测试一</Text>
              <Text style={{backgroundColor:'yellow',flex:2}}>测试二</Text>
              <Text style={{backgroundColor:'gray',flex:1}}>测试三</Text>
              <Text style={{backgroundColor:'blue',flex:4}}>测试四</Text>

            </View>
        );
    }
}

sum( flexGorw ) = 1 + 2 + 1 + 4 = 8
所以:
测试一 1 / 8;
测试二 2 / 8;
测试三 1 / 8;
测试四 4 / 8;

（6）. alignSelf，给某个item添加例外的

export default class untitled extends Component {
    render() {
        return (
            <View style={styles.container}>

              <Text style={{backgroundColor:'red',flex:1,height:100}} >测试一</Text>
              <Text style={{backgroundColor:'yellow',flex:2,height:50}}>测试二</Text>
              <Text style={{backgroundColor:'gray',flex:1,height:80}}>测试三</Text>
              <Text style={{backgroundColor:'blue',flex:4,height:30}}>测试四</Text>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
      backgroundColor:'skyblue',
      marginTop:100,
      flexDirection:'row',
        alignItems:'flex-end',



    }
});

像上面的在侧轴上是flex-end，如果只想让测试四居中怎么办呢，就可以使用alignSelf属性

export default class untitled extends Component {
    render() {
        return (
            <View style={styles.container}>

              <Text style={{backgroundColor:'red',flex:1,height:100}} >测试一</Text>
              <Text style={{backgroundColor:'yellow',flex:2,height:50}}>测试二</Text>
              <Text style={{backgroundColor:'gray',flex:1,height:80}}>测试三</Text>
              <Text style={{backgroundColor:'blue',flex:4,height:30,alignSelf:'center'}}>测试四</Text>

            </View>
        );
    }
}
`

访问量次