Giters

chenbin92 / React-native-example

Learning react native

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React Naitve之 Flexbox 布局

chenbin92 opened this issue · comments

commented

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:

ReactNativeUiComponent

在 React Native 中使用 flexbox

React Native 将 web 中的flexbox 布局引入进来，使得视图的布局更加简单；目前 React Native 主要支持的 flexbox 属性如下：

  • flex: 指定元素是否为伸缩容器
  • flexDirection: 指定主轴的方向
  • flexWrap: 指定伸缩容器的主轴方向空间不足的情况下是否换行
  • alignItems: 定义伸缩项目在伸缩容器的交叉轴上的对其方式
  • justifyContent: 定义伸缩项目沿主轴线的对其方式
  • alignSelf: 用来设置单独的伸缩项目在交叉轴上的对其方式

flex

flex： number

flex

flexDirection

flexDirection：row | column

flexDirection

flexWrap

flexWrap：wrap | nowrap

flexWrap

alignItems

alignItems：flex-start | flex-end | center | stretch

alignItems

justifyContent

justifyContent：flex-start | flex-end | center | space-between | space-around

justifyContent

alignSelf

alignSelf：auto | flex-start | flex-end | center | stretch

alignSelf：auto

下面通过实例演示来实践flexbox布局:

测试一：测试View和Text组件的默认宽度

<View>
   <Text style={{backgroundColor: 'red',height: 100}}> Text 组件默认占据100%的宽度</Text>
   <Text style={{backgroundColor: '#469EDD',height: 100}}> Text 组件默认是纵向布局</Text>
</View>

flexboxExample1

结论： 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>

flexboxExample2

结论：

    1. 必须指定flex为伸缩容器，才能使用伸缩布局模型来排版；
    1. flexDirection 默认是纵向布局，所以默认的flexbox主轴也为竖直方向；可以通过设置flexDirection:row来改变主轴为水平方向

图片布局

待补充...