5分鐘吃透React Native Flexbox

今天我們來聊聊flexbox，它是前端的乙個布局方式。在react native中是主流布局方式。如果你剛剛入門react native，或者沒有多少前端的技術經驗，亦或者對其半知半解，那麼這篇文章將很好的幫助你參透flexbox的整個全貌。

通過這篇文章你將快速吃透整個flexbox，因為對於flexbox你只需掌握以下幾點屬性即可。

flexbox使用的是彈性布局，它有個屬性flex用來控制它的彈性。有點類似與android布局中的weight屬性。當然與前端的css中的flex也有所不同，它支援的型別是number不是string。它有三種狀態：正數、零與負數。直接看**：

import react,  from 'react';

import  from 'react-native';
render() 
}   
const styles = stylesheet.create(,
red: ,
blue: ,
orange: 
});

這是為正數的情況，如果flex:0，控制項的大小就會根據設定的width與height來固定顯示。

如果flex:-1，如果空間足夠，控制項的大小也會根據width與height來展示；如果空間不足，會根據minwidth與minheight來展示。

一般都不會使用flex:-1，而且經過測試，空間不足時minwidth與minheight並不會生效。如果發現生效的方式請務必告知。

在上面的demo基礎上改變style樣式：

const styles = stylesheet.create(,

red: ,
blue: ,
orange: 
});

固定好主軸之後，可以通過justifycontent來指定主軸方向child的排列方式，它有六個可選值

container:

主軸固定之後，剩下的就是副軸，alignitems可以用來控制副軸上的child排列方式。它有五個可選項分別為

改變container的style，主軸設定為row，依次改變alignitems：flex-start、flex-end、center

container:

alignitems: baseline，並不是文字的正中心，而是文字view的容器底部。在上面基礎上新增乙個text，讓文字自身居中展示。

如果再增加乙個view，由於空間不足它會展示不全。這時可以使用flexwrap屬性，它可以支援自動換行展示。

在container中新增flexwrap屬性，並且再新增乙個green view

alignself屬性類似於alignitems，它也是控制副軸上的排列規則，不同的是它使用的物件是child自己。它可以改變父容器alignitems的屬性控制的child排列規則，在副軸上實現自己的排列規則。預設值為auto，繼承父容器的alignitems屬性。因此它也有五個可選值：flex-start、flex-end、center、stretch與baseline。例如我們為range新增alignself，其它的child不變，都繼承父容器的alignitems: flex-start

其它的可選值就不一一說明，可以參考alignitems

有關flexbox，縱觀全文只需掌握開頭所列的六種屬性，react native中的絕大多數布局也就不成問題。現在對於flexbox是否清晰了許多呢？趕緊親自去試試吧~

viewdraghelper之手勢操作神器

android architecture components part1:room

自定義android註解part1:註解變數

tensorflow-梯度下降,有這一篇就足夠了

5分鐘弄懂Docker

儘管之前久聞docker的大名了，但是天資愚鈍，對其到底是個啥東西一直摸不清，最近花了一段時間整理了一下，算是整理出一點頭緒來。官網的介紹是這樣的 那麼應用容器長什麼樣子呢，乙個做好的應用容器長得就好像乙個裝好了一組特定應用的虛擬機器一樣。比如我現在想用mysql那我就找個裝好mysql的容器，執行...

5分鐘搞定Schema

事先宣告 搞定不是精通，只是能夠運用！其實schema很簡單，之前寫過dtd，比dtd學習成本還低！最近做的專案基於檔案系統的，一堆的xml檔案，所以想寫個驗證，也方便ide操作，既然推薦schema，那就用schema d 不廢話，看xml檔案。ivan hihello 這個應該算是個比較典型的x...

5分鐘入門golang module

golang團隊在版本1.13及以後全面支援module機制，用於結束混亂複雜的專案管理機制。同學們可以簡單的將module機制理解成pip apt get等包管理工具。乙個專案 倉庫 包括多個module 模組 乙個模組包括多個package 包 而乙個包含多個 原始檔。簡單的說，在乙個modul...