【React Native 安卓开发】----（Flexbox布局）【第二篇】

提示：在运行一个嵌入了RN的工程里面 需要先进入到工程根目录运行
npm start然后运行工程在模拟器上 每次改动js文件保存后，点击两次R键，就可直接刷新项目。如果是真机摇一摇选择load js 即可更新

#Flexbox是什么？
**Flexbox:**用来指定某个子元素布局，Flexbox可以在不同屏幕尺寸上提供一致的布局结构。
个人理解类似于安卓中的RelativeLayout，只是类似，便于安卓小伙伴方便理解。
下面先看一下运行后的结果，贴出了js代码：

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

class hello extends Component{
  render(){
    return(
      <View style = {{flex:1}}>
          <View style={{width:50,height:50,backgroundColor:'powderblue'}}/>
          <View style={{width:50,height:50,backgroundColor:'skyblue'}}/>
          <View style={{width:50,height:50,backgroundColor:'steelblue'}}/>
      </View>
    );
  }
};

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

#Flexbox容器三个重要属性
flexDirection, justifyContent, alignItems
有个这三个属性我们就能实现子元素任意摆放。
接下来让我们一一探索一下。
##flexDirection
在组件的style中指定flexDirection可以决定布局的主轴。
flexDirection:‘row’ 横向
flexDirection:‘column’ 纵向
默认是column

style = {{flex:1,flexDirection:'row'}}

<--------------------------------------------------------------------------->

style = {{flex:1,flexDirection:'column'}}

从这张图可以看出来和我们第一张一样，可以说明flexDirection不写默认是column。

justifyContent

justifyContent是确定子元素在主轴上的位置，是在中间，在起始点还是终点。有flex-start、center、flex-end、space-around以及space-between我们一一分析。

style = {{flex:1,flexDirection:'column',justifyContent:'center'}}

从代码中可以看出我们主轴是纵向的，主轴上的位置为center

<--------------------------------------------------------------------------->

style = {{flex:1,flexDirection:'column',justifyContent:'flex-start'}}

<--------------------------------------------------------------------------->

style = {{flex:1,flexDirection:'column',justifyContent:'flex-end'}}

<--------------------------------------------------------------------------->

style = {{flex:1,flexDirection:'column',justifyContent:'space-around'}}

space-around是在主轴上平均分布比例1：1：1

<--------------------------------------------------------------------------->

style = {{flex:1,flexDirection:'column',justifyContent:'space-between'}}

space-between是将首尾占据之后，在这两个之间平分。
<--------------------------------------------------------------------------->
##alignItems
alignItems是确定子元素在辅轴上的位置，所谓辅轴就是与主轴垂直的轴。分别有flex-start、center、flex-end以及stretch。
下面让我们看看效果。

style = {{flex:1,flexDirection:'column',justifyContent:'center',alignItems:'center'}}

这里主轴是纵轴，主轴上的位置是居中，辅轴上的位置也是居中。
<--------------------------------------------------------------------------->

style = {{flex:1,flexDirection:'column',justifyContent:'center',alignItems:'flex-start'}}

<--------------------------------------------------------------------------->

style = {{flex:1,flexDirection:'column',justifyContent:'center',alignItems:'flex-end'}}

<--------------------------------------------------------------------------->
最后一个是stretch–填充。这个是最麻烦的。首先当你直接设置alignItems:'stretch’发现没有出校填充的效果。这是因为你需要把对应的宽高限制去掉才会有显示。比如当你主轴是纵轴那你需要把宽去掉才有效果，如果主轴是横轴需要把高度去掉。如下代码和图片便于理解。

 <View style = {{flex:1,flexDirection:'column',justifyContent:'center',alignItems:'stretch'}}>
          <View style={{height:50,backgroundColor:'powderblue'}}/>
          <View style={{height:50,backgroundColor:'skyblue'}}/>
          <View style={{height:50,backgroundColor:'steelblue'}}/>
      </View>

这里我的主轴是纵轴 所以我把宽度取消。
想要更有体会，自己可以一个个属性切换体验一下。

#Flexbox伸缩项目的属性
这里大家可能会混乱那上面的属性是什么。上面是Flexbox容器的属性，下面要介绍的是容器里面具体项目使用到的属性。
##order
定义项目的排列顺序，数值越小排列越靠前，默认为0，语法order: 整数

扫码关注公众号“伟大程序猿的诞生“，更多干货新鲜文章等着你～

公众号回复“资料获取”，获取更多干货哦～

有问题添加本人微信号“fenghuokeji996” 或扫描博客导航栏本人二维码