react-native 样式&宽高&flex-day2

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

class HelloWorldTest extends Component{
  render(){
    return (
        <View>
          <Text style = {styles.red}>aaaa</Text>
          <Text style = {styles.bigblue}>bbb</Text>
          <Text style = {[styles.bigblue,styles.red]}>ccc</Text>
          <Text style = {[styles.red,styles.bigblue]}>ddd</Text>
        </View>
    );
  }
}
const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

AppRegistry.registerComponent('HelloWorldTest',()=>HelloWorldTest);

flex=================

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

class HelloWorldTest extends Component{
  /*render(){
    return (
      <View>
        <View style={{width:50,height:50,backgroundColor:'powderblue'}}></View>
        <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
        <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
      </View>
    );
  }*/
  render(){
    return(
      <View style={{height:500}}>
        <View style={{flex: 1, backgroundColor: 'powderblue'}} />
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />
        <View style={{flex: 3, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

AppRegistry.registerComponent('HelloWorldTest',()=>HelloWorldTest);