React Native入门到怀疑人生（四）

欢迎收听React Native系列，基于Window10,偏向于Android端的React Native。上一章React Native入门到怀疑人生（三）我们已经讲解了RN的props属性，state状态，样式相关知识，那么本章节将讲解RN的flexbox布局，控件宽高相关知识。本章将使用ES6语法。文章不当之处，希望大家及时指出，多谢！

宽高

组件的宽高，这里可以理解为Android中控件的宽高，宽和高决定了控件大小。Android中的宽高使用的单位为dp（独立像素密度）,而RN中的宽高无单位。表示了与设备像素密度无关的逻辑像素点。

/**-----width height--------****/
import React, {Component} from 'react';
import {AppRegistry, Text, View} from 'react-native';

class FixDimensionsBasics extends Component {
  render() {
    return (
      <View>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}}/>
        <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}}/>
        <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}}/>
      </View>
    );
  }
}

AppRegistry.registerComponent('FirstRNProject', ()=>FixDimensionsBasics);

运行结果如下图

backgroundColor参考 https://facebook.github.io/react-native/docs/colors.html

flex布局

flex属性

可参考android中linearLayout的layout_weight属性。在RN组件中使用flex属性，可以使其在可利用的空间中动态地扩张或收缩。

组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的width和height，也没有设定flex，则父容器的尺寸为零。其子组件如果使用了flex，也是无法显示的。

使用flex来布局

React Native中使用flexbox规则来指定某个组件的子元素的布局。Flexbox可以在不同屏幕尺寸上提供一致的布局结构。通常使用flexDirection，alignItems和justifyContent的组合来实现正确的布局。在使用flex布局时候，可配合flexDirection，alignItems和justifyContent一起来实现控件子元素的布局

Flex Direction

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

// /**--------------使用flexbox布局--------------**/
import React, {Component} from 'react';
import {AppRegistry, Text, View} from 'react-native';

class FlexDirecitonBasics extends Component {
  render() {
    return (
      <View style={{flex:1, flexDirection: 'row'}}>

        <View style={{width: 50,  backgroundColor: 'powderblue'}}/>
        <View style={{width: 50,  backgroundColor: 'skyblue'}}/>
        <View style={{width: 50,  backgroundColor: 'steelblue'}}/>
      </View>
    );
  }
}

AppRegistry.registerComponent('FirstRNProject', ()=> FlexDirecitonBasics);

运行结果如下图

Justify Content

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

// /**--------------使用flexbox布局--------------**/
import React, {Component} from 'react';
import {AppRegistry, Text, View} from 'react-native';

class FlexDirecitonBasics 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('FirstRNProject', () => FlexDirecitonBasics);

运行结果如下图

Align Items

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

// /**--------------使用flexbox布局--------------**/
import React, {Component} from 'react';
import {AppRegistry, Text, View} from 'react-native';

class FlexDirecitonBasics 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('FirstRNProject', ()=> FlexDirecitonBasics);

运行结果如下图

关于flex相关属性，大家可以多多尝试，敲出不同的代码，来验证效果。读万卷书，敲万行代码。
比如大家可以尝试实现如下效果

总结

• 1 组件的style中指定flexDirection可以决定布局的主轴沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列,默认值是竖直轴(column)方向

• 2 组件的style中指定justifyContent可以决定其子元素沿着主轴的排列方式。元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布?flex-start、center、flex-end、space-around以及space-between

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

文章不当之处请及时指出。周末朋友来南京，拖更啦~~~

##参考资料

• FaceBook.github
• ReactNative 中文网