本教程內容和https://zhiwehu.gitbooks.io/react-native/content/ 同步更新。
布局設計
布局
我們接下來要做的是一個簡單的待辦列表App，以下是這個app最終的樣子：
App布局分成三部分：
header：頭部，用于增加新的待辦事宜
content：主體區，用于顯示待辦列表，以及對待辦事宜的操作：完成或刪除
footer：腳部，用于顯示待辦列表未完成的條數，過濾器，以及快捷刪除全部完成的待辦列表
Flexbox布局
為實現上面的布局，我們使用CSS彈性盒子(Flexbox)，這是一種布局方式。Flexbox可以使頁面適應不同的屏幕大小以及設備類型，確保界面元素擁有更恰當的排布方式。React Native采用Flexbox進行布局，使得App開發和Web開發采用相同的技術，這也是React Native吸引開發者的原因之一。
看一下我們的App布局：
- header固定高度，而且里面的元素排列方向是橫向，上下居中，和外邊框有一定的距離
- footer固定高度，里面的元素橫向排列
- content彈性高度，里面的列表縱向排列，每一行里面的元素又是橫向排列
下面是詳細的分解標注圖
我們將在后面的內容里按步驟詳細分解這些模塊。
相關文章：
