学习React Native日记四，样式和高度与宽度

样式

所有的核心组件都接受名为style的属性
基本遵循Web的CSS命名，不过因为在JS中所以要求以驼峰法命名。
数组中靠后的样式优先级更高
一般使用 StyleSheet.create 集中定义组件样式

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

class SomeStyles extends Component{
  render(){
    return (
    
     red
    bigblue, then red
    
  );}
}

const styles = StyleSheet.create({
  bigblue : { 
    color: 'blue', 
    fontWeight: 'bold', 
    fontSize: 30, 
    }, 
    red: { 
    color: 'red', 
    },
});

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

高度与宽度

组件的高宽决定屏幕显示尺寸。

1.指定宽高
2.弹性宽高

指定宽高

即width和height。

尺寸是无单位的，指代像素逻辑点。

class FixedWidthAndHeight extends Component{
  render(){
    return (
       
        
        
      
    );
  }
}//一般用于不同尺寸的屏幕上都显示成一样的大小。

弹性宽高

即通过设置比例动态扩张或收缩。

没有固定的width和height，也没有设定flex。即尺寸为0。
父容器的尺寸不可为0，否则无法显示。

class FlexWidthAndHeight extends Component{
  render(){
    return (
      
         
         
         
      
    );
  }
}