Please enable JavaScript.

Coggle requires JavaScript to display documents.

React Native (基礎元件 (View, Text, Image, FlatList 取代 ListView (效能差) …

- - - - 由 Facebook 主導，前身的名稱為 css-layout。Yoga 主要以 C 語言開發，提供高執行效能與易於整合其它語言
      - 主要是應用在手機 App 的開發上
      - 採用了與 CSS3 標準裡 Flexbox 相近的語法與方式
        
        並沒有完全支援所有的特性
      - CSS3 的 flexbox 实现
    - - flex: 有”彈性”、“彎曲”的意思，通常作為動詞用。flexible(彈性的)是這個字詞的形容詞。
      - axis: 有”坐標軸”、“基準線”的意思。Flexbox 使用 main axis(主基準線)與 cross axis(相反基準線)來區分水平與垂直的兩個不同的基準線，main axis(主基準線)代表的主要的基準線，依照 flexDirection 的屬性來決定主基準線是水平的還是垂直的方向。cross axis(相反基準線)則是與主基準線相反的基準線。基準線代表的是容器(container)中的項目排列時按照的方向規範。
      - container 與 items: container(容器)中裝有 items(項目)，這兩個在 DOM 元素中有父母-子女(parent-children) 關係。Flexbox 的排列、對齊、方向等等屬性是在 container(容器) 中定義的，當然這是指對容器中的項目們所作的屬性定義。
      - grow、shrink、basis: 這三個是項目的屬性定義值。grow 有”成長”、“變大”的意思，shrink 則有”收縮”、“縮水”的意思。basis 則是”基礎”、“標準”的意思。這三個是用於項目(元件)的”彈性“屬性，也就是在版面或外部容器的尺寸變動時，項目應該如何隨之進行變動。
      - wrap、nowrap、wrap-reverse: wrap 有”包裝”的意思，但用在這裡是代表要不要擠在同一行之中，nowrap代表這個容器中的項目是只能擠在同一行之中，wrap則是允許多行。wrap-reverse與wrap一樣可以允許多行，但開始與結束會顛倒過來。-reverse字詞很常見，它是”顛倒”的意思。
      - align-items、align-self、align-content: align 是”對齊”的意思。align-self 是用於項目(元件)的屬性，align-items 與 align-content 是用於容器的屬性，都是用來作對齊使用的。這幾個都是應用在 cross axis(相反基準線)時。
      - stretch: “伸展”的意思，用在這是是填好填滿的意思。
      - justify-content: justify 也有”對齊”的意思，它是用在 main axis(主基準線)時的對齊。這是用於容器的屬性。
      - flow: flow 是”流動”的意思，在這裡的意思是排列的情況。flex-flow 是 flex-direction 與 flex-wrap 的組合簡寫法，合稱dw。(註: React Native 中沒這個屬性)
      - order: “順序”的意思，項目(元件)的屬性，代表這個項目(元件)在容器中的排列次序。(註: React Native 中沒這個屬性)