React Native学习(五)：使用Flexbox布局

---

flexbox规则

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

• flexDirection
• alignItems
• justifyContent

三个样式属性就已经能满足大多数布局需求。
译注：这里有一份简易布局图解，可以给你一个大概的印象。
这里自己贴一下这个网站的口诀片：

• flex-direction
• flex-wrap
• justity-content
• align-items
• align-content

大体也就是下面几种情况，背背就熟悉了

• flex-direction
  • row
  • row-reverse
  • column
  • column-reverse
• flex-wrap
  • nowrap
  • wrap
  • wrap-reverse
• justity-content(no flex : 1)
  • flex-start
  • center
  • flex-end
  • space-between
  • space-around
• align-items 【(nowrap)align-self】
  • flex-start
  • center
  • flex-end
  • stretch
• align-content(wrap)
  • stretch
  • flex-start
  • center
  • flex-end
  • space-between
  • space-around

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

---

Flex Direction

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

简单的代码例子：

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

class ABegin extends Component {
  render() {
    return (
      // 尝试把`flexDirection`由`row`改为`column`看看
      <View style={{flex: 1, flexDirection: 'row'}}>
        <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>
    );
  }
};

AppRegistry.registerComponent('ABegin', () => ABegin);

对应的效果为

我们可以容易发现，会按row去排列布局

---

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 ABegin extends Component {
  render() {
    return (
      // 尝试把`justifyContent`改为`center`看看
      // 尝试把`flexDirection`改为`row`看看
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
      }}>
        <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>
    );
  }
};

AppRegistry.registerComponent('ABegin', () => ABegin);

对应的效果为：

例子比较简单，不解释了
可以简单修改看看

---

Align Items

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

• flex-start
• center
• flex-end
• stretch

简单的代码例子：

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

class ABegin extends Component {
  render() {
    return (
      // 尝试把`alignItems`改为`flex-start`看看
      // 尝试把`justifyContent`改为`flex-end`看看
      // 尝试把`flexDirection`改为`row`看看
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
        <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>
    );
  }
};

AppRegistry.registerComponent('ABegin', () => ABegin);

对应的效果为：

根据上面的总结，也很好理解。

---

简单总结

这里也就一些需要记忆的地方
一些参考说明
具体解释，可以参考上图，或者参考说明

具体代码，
可以见
https://github.com/2954722256/react-native-demo
因为自己是拿android测试的
所以注意修改代码为：index.android.js