006_ReactNative: Height and Widt

(问渠那得清如许，为有源头活水来。 双手奉上RN官网)

固定尺寸: Height and Width 用于确定组件的尺寸. RN中的所有尺寸都是无单位的,最终以像素为单位展现.

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

class FixedDimensionsBasics extends Component {
  render() {
    return (
      //view中元素默认独占一行
      <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和值中所占的比例分配高度,宽度与父view相同

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高度占据整个屏幕
//       <View style={{flex: 1}}> 
      //父view没有指定尺寸,子view没有可用空间,都无法显示
//       <View style={{}}>  
      //此时父view高度300定值,子view高度按比例划分
//       <View style={{height: 300, width:200}}> 
      
      //3个子view宽度与父view相同.高度占比依次为1/6,2/6, 3/6.  各自的flex和值为6
      <View style={{height: 300}}> 
        {/* shit,在<view>内部常用的注释方式都用不了,包括<!-- c --> */}
        {/* 好吧,组件内注释需要使用{}包括起来 */} 
        <View style={{flex: 1, backgroundColor: 'powderblue'}} />
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />
        <View style={{flex: 3, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

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