React Native - Height and Width

组件的高度和宽度决定了其在屏幕上的大小。

固定尺寸

设置一个组件的尺寸的最简单的方法是通过将一个固定的宽度和高度给style。在React Native中所有尺寸是没有单位的，代表密度独立像素（density-independent pixels）。

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

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

设置组件尺寸这种方式是很常见的，应始终呈现完全相同的大小，而不管屏幕尺寸。

弹性尺寸（Flex Dimensions）

在一个组件的style中使用flex，可以让这个组件根据可用空间的大小而动态的扩展和缩小，通常你会用flex：1，它告诉一个组件去填补所有可用空间，在彼此有相同父类的组件之间平分空间，flex给出越大，对应的组件将会占有更高的空间比例，相对于它同层级的组件来说。

如果一个组件的父类的尺寸大于0，则组件才能扩大到填充可用空间，如果组件的父类没有一个固定的宽高或flex，父类的尺寸就是0，组件的flex将看不见。

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

class FlexDimensionsBasics extends Component {
    render() {
        return (
                // Try removing the `flex: 1` on the parent View.
                // The parent will not have dimensions, so the children can't expand.
                // What if you add `height: 300` instead of `flex: 1`?
                <View style={{flex: 1}}>
                <View style={{flex: 1, backgroundColor: 'powderblue'}} />
                <View style={{flex: 2, backgroundColor: 'skyblue'}} />
                <View style={{flex: 3, backgroundColor: 'steelblue'}} />
                </View>
                );
    }
};

AppRegistry.registerComponent('AwesomeProject', () => FlexDimensionsBasics);

在你可以控制组件的大小后，下一步就是要学会如何在屏幕上布局好。