【React Native 安卓开发】----（Flexbox布局）【第二篇】
【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: 整数