React Native 学习笔记（六） -- 组件的宽和高及flexbox布局

Part One

组件的宽和高

在React Native 中尺寸的单位是与设备像素密度无关的逻辑像素点。最简单的方式是直接通过width和height指定固定的宽和高。

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

class FixedDimensionsBasics exdends Component {
    render(){
        return(
            <View>
                <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}}></View>
            </View>
        );
    }
};

// 注册后才能正确渲染
AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);

注：上面自定义了一个组件，组件的宽和高为50像素，背景色为深蓝。

除了上面的指定方式之外，还可以通过上篇里说的style的方式去设置一个组件的宽和高。

Part Two

弹性（Flex）宽高

除了上面说的通过width 和 height 指定组件的宽和高之外，我们还能通过弹性的方式去指定组件的宽和高。在Android常用的布局中相当于LinearLayout的 weight 权重标志，在使用方式上也是类似的。下面我们来看一下怎么实现设置组件的弹性宽高：

在实现之前我们要明确一点，组件能够撑满剩余空间的前提是其父容器的尺寸不是零。如果父容器为零，子组件如果使用flex，子组件也是无法显示的，但是如果子组件使用固定宽和高的话，父容器还是会被撑开的。
父容器为零的条件：
父容器既没有固定的width和height，也没有设定flex，则父容器的尺寸为零。

下面上代码：

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

class FlexDimensionsBasics extends Component {
    render(){
        return (
            // 用‘height: 300’来代替父view的‘flex: 1’试试看
            <View style={{flex: 1}}>
                <View style={{flex: 1, backgroundColor: 'powderblue'}}></View>
                <View style={{flex: 2, backgroundColor: 'skyblue'}}></View>
                <View style={{flex: 3, backgroundColor: 'steelblue'}}></View>
            </View>
        );
    }
}

> 运行上面的代码，我们会得到纵向的三个横条，布局方向是纵向，高度比例为1:2:3，总高度为整个屏幕的高度。
> 修改父View的flex: 1 为 height: 1之后组件的整体高度为300，三条横线条的高度分别为50，100和150。

下面附上运行结果的图片：

Part Three

React Native 中的Flexbox

首先，对比一下web的CSS样式，在React Native中：
1、flexDirection 的默认值是column而不是row。也就是说，布局的方向默认是纵向的；这个写在父容器的样式里，作用于整个父容器，决定父容器内部的组件的布局方向，称为主轴。
2、alignItems 的默认值是stretch而不是flex-start；这个写在父容器的样式里，作用于整个父容器，决定父容器内部的组件的布局方向。
3、flex 后面只能指定一个无单位的数字值。标识占比。
4、justifyContent 用于决定子元素沿着主轴的排列方式，其值选项有：flex-start（代表按照主轴方向，从父容器的左上角开始布局）、 center（代表子元素按照主轴方向布局并在父容器中居中显示）、flex-end（代表按照主轴方向，子元素显示在容器的最下方）、space-around（代表按照主轴方向，子元素均匀显示在父容器内部）、space-between（代表按照主轴方向，子元素布局占满父容器）

Part Four

下面我们重点看一下justifyContent和alignItems不同的属性值的效果：
假设布局的代码如下：

import React, { Component } from 'react';
import {
    AppRegistry, //框架提供的API
    View
} from 'react-native';

class FlashText extends Component {
    render() {
    return (
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'flex-start',
        alignItems: 'stretch',
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'red'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'red'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
}

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

注：我们每次都是保证只修改一个属性的值，其他属性的值使用默认值

首先，我们看一下justifyContent的效果：

justifyContent: ‘flex-start’

justifyContent: ‘center’

justifyContent: ‘flex-end’

justifyContent: ‘space-around’

justifyContent: ‘space-between’

通过上面的图片相信大家会更直观的感受到justifyContent属性的作用。下面让我们来看一下alignItems属性在不同的属性值下的作用：

同样的我们还是保证其他的属性使用默认的属性值
alignItems: flex-start

alignItems: center

alignItems: flex-end

alignItems: stretch

先明确一点，主轴通过flexDirection属性指定的，主轴方向确定后，另一个方向就是次轴。

注：我们好像发现alignItems: stretch属性值好像并没有什么作用和属性值为flex-start的效果一样。其实要想真正的看到stretch属性值的真正效果，子元素在次轴方向上是不能有固定尺寸的。所以我们将上面代码中的子元素的width: 50全部去掉，因为主轴是纵向，横向上的也就是宽度，所以我们去掉宽度值。然后看效果：

有兴趣的可以试试在其中一个子元素上面加上width: 50，看看效果，我们会发现这个alignItems: stretch属性值会让子元素在次轴方向上撑满父容器。

以上就是对React Native中Flexbox的使用总结，基本上上面的三个属性：flexDirection、alignItems、justifyContent就能满足大部分的布局需要。

Part Four

资料

React Native – 中文网_高和宽
React Native – 中文网_使用Flexbox布局