react-native中的style

在 React Native 中，你並不需要學習什么特殊的語法來定義樣式。我們仍然是使用 JavaScript 來寫樣式。
所有的核心組件都接受名為style的屬性。這些樣式名基本上是遵循了 web 上的 CSS 的命名，
只是按照 JS 的語法要求使用了駝峰命名法，例如將background-color改為backgroundColor。

style屬性可以是一個普通的 JavaScript 對象。這是最簡單的用法，因而在示例代碼中很常見。
你還可以傳入一個數組——在數組中位置居后的樣式對象比居前的優先級更高，
這樣你可以間接實現樣式的繼承。

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

export default class LotsOfStyles extends Component {
  render() {
    return (
      <View>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigBlue}>just bigBlue</Text>
        <Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
        <Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
      </View>
    );
  }
}

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

指定寬高
最簡單的給組件設定尺寸的方式就是在樣式中指定固定的width和height。
React Native 中的尺寸都是無單位的，表示的是與設備像素密度無關的邏輯像素點。

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

export default 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>
    );
  }
}

彈性（Flex）寬高
在組件樣式中使用flex可以使其在可利用的空間中動態地擴張或收縮。一般而言我們會使用flex:1來指定某
個組件擴張以撐滿所有剩余的空間。如果有多個並列的子組件使用了flex:1，則這些子組件會平分父容器中
剩余的空間。如果這些並列的子組件的flex值不一樣，則誰的值更大，誰占據剩余空間的比例就更大
（即占據剩余空間的比等於並列組件間flex值的比）。
值得注意的事情是:
組件能夠撐滿剩余空間的前提是其父容器的尺寸不為零。如果父容器既沒有固定的width和height，
也沒有設定flex，則父容器的尺寸為零。其子組件如果使用了flex，也是無法顯示的。

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

export default class FlexDirectionBasics extends Component {
  render() {
    return (
        <View style={{flex: 1, flexDirection: 'row'}}>
          <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>
      )
   }
}

使用Flexbox布局
我們在 React Native 中使用 flexbox 規則來指定某個組件的子元素的布局。Flexbox 可以在不同屏幕尺寸上提供一致的布局結構。
一般來說，使用flexDirection、alignItems和 justifyContent三個樣式屬性就已經能滿足大多數布局需求。
React Native 中的 Flexbox 的工作原理和 web 上的 CSS 基本一致，當然也存在少許差異。
首先是默認值不同：flexDirection的默認值是column而不是row，而flex也只能指定一個數字值。
Flex Direction
在組件的style中指定flexDirection可以決定布局的主軸。子元素是應該沿着水平軸(row)方向排列，
還是沿着豎直軸(column)方向排列呢？默認值是豎直軸(column)方向。

Justify Content
在組件的 style 中指定justifyContent可以決定其子元素沿着主軸的排列方式。子元素是應該靠近主
軸的起始端還是末尾段分布呢？亦或應該均勻分布？對應的這些可選項有：flex-start、center、flex-end、
space-around、space-between以及space-evenly。

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

export default class JustifyContentBasics extends Component {
  render() {
    return (
      // 嘗試把`justifyContent`改為`center`看看
      // 嘗試把`flexDirection`改為`row`看看
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
      }}>
        <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>
    );
  }
};

Align Items
在組件的 style 中指定alignItems可以決定其子元素沿着次軸（與主軸垂直的軸，比如若主軸方向為row，則次軸方向為column）
的排列方式。子元素是應該靠近次軸的起始端還是末尾段分布呢？亦或應該均勻分布？
對應的這些可選項有：flex-start、center、flex-end以及stretch。
注意：要使stretch選項生效的話，子元素在次軸方向上不能有固定的尺寸。
以下面的代碼為例：只有將子元素樣式中的width: 50去掉之后，alignItems: 'stretch'才能生效。

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

export default class AlignItemsBasics extends Component {
  render() {
    return (
      // 嘗試把`alignItems`改為`flex-start`看看
      // 嘗試把`justifyContent`改為`flex-end`看看
      // 嘗試把`flexDirection`改為`row`看看
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'stretch',
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{height: 50, backgroundColor: 'skyblue'}} />
        <View style={{height: 100, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

本質就是flex布局
更多布局知識見這篇文檔：https://reactnative.cn/docs/layout-props/