基础篇_使用Flexbox布局基础篇_使用Flexbox布局

我们在 React Native 中使用 flexbox 规则来指定某个组件的子元素的布局。Flexbox 可以在不同屏幕尺寸上提供一致的布局结构。

一般来说，使用 flexDirection , alignItems 和 justifyContent
三个样式属性就已经能满足大多数布局需求。

direction [d?? rek ?n] 方向；指导；趋势
align [?' la?n] 排列；排成一行
justify ['d?? st?' fai] 整理版面
content [k?n' tent] 内容，容量

译注：这里有一份简易布局图解，可以给你一个大概的印象。
Flex Direction

文章图片

column ['k?l?m] 纵队，列
row [r??] 行，排
reverse [r?'v??s] 相反

React Native 中的 Flexbox 的工作原理和 web上的CSS基本一致，当然也存在少许差异。首先是默认值不同：flexDirection 的默认值是 column 而不是row，而 flex 也只能指定一个数字值。

在组件的 style 中指定 flexDirection 可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(column)方向。

代码如下

import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; class MyApp extends Component {render() { return ( // 尝试把 `flexDirection` 改为`column` ); } } AppRegistry.registerComponent('MyApp', () => MyApp);

效果如下：

文章图片

render() { return ( // 尝试把 `flexDirection` 改为`column` ); }

效果如下：

文章图片
Justify Content 在组件的 style 中指定 justifyContent 可以决定其子元素沿着主轴的排列方式。
子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？
对应的这些可选项有：flex-start、center、flex-end、space-around以及space-between。

文章图片

代码如下：

import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; class MyApp extends Component {render() { return ( // 尝试把 `flexDirection` 改为`column` ); } } AppRegistry.registerComponent('MyApp', () => MyApp);

效果如下：

文章图片
代码如下：

render() { return ( ); }

效果如下：

文章图片
Align Items 在组件的style中指定 alignItems，可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。
子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？
对应的这些可选项有：flex-start、center、flex-end 以及 stretch。

文章图片

stretch [stret?] 伸展,张开；
注意：要使 stretch 选项生效的话，子元素在次轴方向上不能有固定的尺寸。

以下面的代码为例：
只有将子元素样式中的width: 50去掉之后，alignItems: 'stretch'才能生效。
代码如下：

import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; class MyApp extends Component {render() { return ( ); } } AppRegistry.registerComponent('MyApp', () => MyApp);

效果如下：