React Naitve之 Flexbox 布局
chenbin92 opened this issue · 0 comments
Flexbox
是 React Native 应用开发中必不可少的一部分,也是最常用最基础的内容,下面让我们一起去探索一下什么是flexbox布局:
Flexbox 布局是什么?
Flex 是 Flexible Box 的缩写,意为"弹性盒子布局",是 CSS3 新增加的一个布局模块;做过 web 前端开发的人员都清楚,传统的页面布局基于盒状模型,依赖 display属性 + position属性 + float属性。相反的,flexbox 提供了更加灵活的特性,可以简便、完整、响应式地实现各种页面布局。
布局模型
flexbox布局由伸缩容器和伸缩项目组成。任何一个元素都可以指定为 flexbox 布局,其中设为 display: flex
或 display: inline-flex
的元素称为伸缩容器;
换句通俗的话讲就是:只有设置为 display: flex
或 display: inline-fiex
的元素才能叫做伸缩容器,它的子元素才能使用伸缩布局模型提供的属性来排版。
UI 组件
在讲解伸缩容器属性之前,我们需要先简单了解一下 React Native 提供的基础UI组件,在下面我们会用到这些UI组件结合 flexbox 去布局。
就像学习 HTML 一样,标签十分重要。开发web应用程序时,需要使用很多的 HTML 标签,例如 h1~h6
、p
、ul
、li
等等;但在 React Native中,只提供了基础的UI 组件:
View
: View 组件是一个容器组件,提供了视图布局的功能,是 UI 组件中最基本的组件。它可以多层嵌套,支持flexbox布局,起到容器组件的作用,类似于 web 前端开发中的div
标签Text
: Text 组件主要用于文本显示,被触摸时可以设置是否高亮与用户响应,支持多层嵌套,所有样式可以继承,Text组件必须被包含在View组件中Image
:ListView
:TextInput
:
在 React Native 中使用 flexbox
React Native 将 web 中的flexbox 布局引入进来,使得视图的布局更加简单;目前 React Native 主要支持的 flexbox 属性如下:
flex
: 指定元素是否为伸缩容器flexDirection
: 指定主轴的方向flexWrap
: 指定伸缩容器的主轴方向空间不足的情况下是否换行alignItems
: 定义伸缩项目在伸缩容器的交叉轴上的对其方式justifyContent
: 定义伸缩项目沿主轴线的对其方式alignSelf
: 用来设置单独的伸缩项目在交叉轴上的对其方式
flex
flex: number
flexDirection
flexDirection:row | column
flexWrap
flexWrap:wrap | nowrap
alignItems
alignItems:flex-start | flex-end | center | stretch
justifyContent
justifyContent:flex-start | flex-end | center | space-between | space-around
alignSelf
alignSelf:auto | flex-start | flex-end | center | stretch
下面通过实例演示来实践flexbox布局:
测试一:测试View
和Text
组件的默认宽度
<View>
<Text style={{backgroundColor: 'red',height: 100}}> Text 组件默认占据100%的宽度</Text>
<Text style={{backgroundColor: '#469EDD',height: 100}}> Text 组件默认是纵向布局</Text>
</View>
结论: Text 组件默认占据100%的宽度,默认是纵向布局
测试二:测试flex属性
<View style={{marginTop: 22,flex: 1,flexDirection: 'row', justifyContent: 'flex-start'}}>
<Text style={{backgroundColor: 'red',height: 100}}>1. 父元素必须设置flex属性,才能使用flexbox布局</Text>
<Text style={{backgroundColor: '#469EDD',height: 100}}> 2. flexDirection默认为纵向布局,即主轴默认是竖直方向</Text>
</View>
结论:
-
- 必须指定flex为伸缩容器,才能使用伸缩布局模型来排版;
-
- flexDirection 默认是纵向布局,所以默认的flexbox主轴也为竖直方向;可以通过设置
flexDirection:row
来改变主轴为水平方向
- flexDirection 默认是纵向布局,所以默认的flexbox主轴也为竖直方向;可以通过设置
图片布局
待补充...