React Native Tutorial摘要（二）

###组件的宽和高基本跟CSS一样使用，但要注意是放在style中的对象中，即{{}}。import React, { Component } from 'react';import { AppReg

###组件的宽和高基本跟CSS一样使用，但要注意是放在style中的对象中，即{{}}。

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: 1
基于父节点大小使用。如果父节点大小为0，则无法使用。

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

###伸缩布局主要是_flexDirection_，alignItems，_justifyContent_的组合使用。
flexDirection ： row，column
justifyContent： flex-start，center，flex-end，space-around，space-between
alignment：flex-start, center, flex-end, stretch（这个还没明白是如何拉伸）

import React, { Component } from 'react';import { AppRegistry, View } from 'react-native';class AlignItemsBasics {  render() {    return (      // Try setting `alignItems` to 'flex-start'      // Try setting `justifyContent` to `flex-end`.      // Try setting `flexDirection` to `row`.      <View style={{        flex: 1,        flexDirection: 'column',        justifyContent: 'center',        alignItems: 'center',      }}>        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />      </View>    );  }};AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);