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/