React-Native 基础（五） Height and Width

参考文档：http://facebook.github.io/react-native/docs/height-and-width.html

1. Fixed Dimension 静态尺寸
React-Native所有尺寸都是无单位，密度无关像素

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

2. Flex Dimension 动态尺寸

import React,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,() => FlexDimensionsBasics);

flex类似于Android的weight，不作过多解释