//5.使用Flexbox布局
//flex:决定元素在主轴上如何填满可用区域
//flexDirection:决定布局的主轴方向 水平轴(row)方向排列 竖直轴(column)方向排列 默认值是竖直轴(column)方向。
//justifyContent:决定其子元素沿着主轴的排列方式: flex-start(主轴的起始端)、center(子元素全显示在中间)、flex-end(主轴末尾段)、space-around(每个子元素周围相同空格)
//space-between(前后中间各一个子元素)以及space-evenly(主轴均匀分布)
//alignItems:决定其子元素沿着次轴(与主轴垂直的轴,比如若主轴方向为row,则次轴方向为column)的排列方式 :flex-start、center、flex-end以及stretch(拉升:要使stretch选项生效的话,子元素在次轴方向上不能有固定的尺寸)
import React, { useState } from 'react';
import { View } from 'react-native';
const FlexboxDemo = () => {
return (
<View style={{flex:1,flexDirection:'column',justifyContent:'space-evenly',alignItems:'stretch'}}>
<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>
);
}
export default FlexboxDemo;
React-native学习-5-使用Flexbox布局
最新推荐文章于 2024-08-16 19:01:06 发布