React Native之高度与宽度

---

我们可以给组件指定宽高，代码如下：

import React, {Component} from 'react'

import {
    StyleSheet,
    View,
} from 'react-native'

export default class LotsOfStyles extends Component<Props> {
    static navigationOptions = {
        // title: 'page 1',
        title: '指定宽高',
    };

    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>
        );
    }
}

效果图：

除了上边的指定宽度，我们也可以使用弹性宽度设置布局大小，代码如下：

import React, {Component} from 'react'

import {
    StyleSheet,
    View,
} from 'react-native'

export default class LotsOfStyles extends Component<Props> {
    static navigationOptions = {
        // title: 'page 1',
        title: '指定宽高',
    };

    render() {
        return (
            <View style={{flex:1}}>
                <View style={{flex: 1,backgroundColor:'powderblue'}}/>
                <View style={{flex:2,backgroundColor:'skyblue'}}/>
                <View style={{flex:3,backgroundColor:'steelblue'}}/>
            </View>
        );
    }
}

flex可以使控件在其可利用的空间中动态地扩张或收缩。
效果图：

当把父控件的flex去掉时，页面将什么都不会显示；
当把父控件的height为300时，效果图如下：