樣式

所有的核心組件都接受名為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 (
    <View>
    <Text style={styles.red}> red</Text>
    <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
    </View>
  );}
}

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 (
      <View> 
        <View style={{width: 50, height: 50, backgroundColor: 'bigblue '}} />
        <View style={{width: 100, height: 100, backgroundColor: 'red'}} />
      </View>
    );
  }
}//一般用于不同尺寸的屏幕上都顯示成一樣的大小。

彈性寬高

即通過設置比例動態擴張或收縮。

沒有固定的width和height，也沒有設定flex。即尺寸為0。
父容器的尺寸不可為0，否則無法顯示。

class FlexWidthAndHeight extends Component{
  render(){
    return (
      <View style={{flex: 1}}>
        <View style={{flex: 1, backgroundColor: 'bigblue'}} /> 
        <View style={{flex: 3, backgroundColor: 'red'}} /> 
        <View style={{flex: 1,  backgroundColor: 'bigblue'}} /> 
      </View>
    );
  }
}