样式

所有的核心组件都接受名为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>
    );
  }
}