React Native学习笔记(day04)

此篇讲解flex布局系列。

在React Native中，我们使用flexBox布局来适配页面，这个写法和CSS有些相似。有前端基础的同学应该会比较快掌握。
其中flexDirection和alignItems，justifyContent三个属性比较重要，一般的界面布局使用这三个组合都能满足。iOS开发我们之前都是使用autolayout来进行UI界面的约束。引入flex布局后，我们则不需要autoLayout来进行了，界面都可以使用js文件配合样式表来操作，是不是有方便呢。下面我们通过简单的demo操作来了解下flex布局。
下面demo学习，借鉴来源于React-Native中文网的这篇文章，我觉得讲解的很简单明了，借鉴一下。
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

class AlignItemsBasics 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('AwesomeProject', () => AlignItemsBasics);

大家可以将其中的flexDirection，justifyContent,alignItems修改属性值，来查看下效果。
开始效果应该是这样:

flex.png

属性介绍：

Flex Direction：决定元素布局的主轴。
justifyContent:控制子元素是应该靠近主轴的起始端还是末尾段、环绕等方式。
Align Items：子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。

有这些值：

flexDirection?: "row" | "column" | "row-reverse" | "column-reverse">

justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around"

Align Items:"flex-start" | "flex-end" | "center" | "stretch" | "baseline";

只看描述可能不清晰，大家可以将上述代码在空项目中运行一下，手动修改下属性值，就能加深理解flex布局了，这个demo比较简单，就不上传了，新建个项目，index.ios.js里粘贴上述代码即可。