一、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:伸缩项目会平均地分布在行里,连段保留一半的空间。
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'