组件的高度与宽度决定了其在屏幕上显示的尺寸。

指定宽高

最简单的给组件设定尺寸的方式就是在样式中指定固定的width和height。React Native中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。

import React, { Component } from 'react';
import { View } from 'react-native';
export default class FixedDimensionsBasics extends Component{
    render(){
        return(
            <View>
            <View style={{width:50,height:50,backgroundColor:'powerblue'}}/>
            <View style={{width:100,height:100,backgroundColor:'skyblue'}}/>
            <View style={{width:150,height:150,backgroundColor:'steelblue'}}/>
            </View>
            );
    }
}

运行结果如图

这样给组件设置尺寸也是一种常见的模式，比如要求在不同尺寸的屏幕上都显示成一样的大小。

弹性（Flex）宽高

在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用flex：1来指定某个组件扩张以及撑满所有剩余的空间。如果有多个并列的自组建使用了flex：1，则这些自组建会平分富容器中剩余的空间。如果这些并列的自组建的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比）。

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

import React, { Component } from 'react';
import { View } from 'react-native';
export default class FixedDimensionsBasics extends Component{
    render(){
        return(
        <View style={{flex:1}}>
        <View style={{flex:1,backgroundColor:'powerblue'}}/>
        <View style={{flex:2,backgroundColor:'skyblue'}}/>
        <View style={{flex:3,backgroundColor:'steelblue'}}/>
        </View>
        );
    }
}

运行结果如图

当你熟练掌握了如何控制组件的尺寸后，下一步就可以学习如何在屏幕上排列组件了。