React Native App 開發教學

1. App設計與開發專題研習課程
課程：006(2017/4/15)
業師：陳信宏(阿信)
eosinchen@gmail.com

2. React Native 程式開發(5)
畫面布局：Flexbox 與其屬性

3. Flexbox 相關屬性(一)
• https://reactnative.cn/docs/0.43/layout-with-flexbox.html#content
• flexDirection(子元件的排列主軸與方向)
• row：水平方式(左 -> 右)，row-reverse：水平方式(左 -> 右)
• column：垂直方式(上 -> 下)， column-reverse：垂直方式(下 -> 上)
• justifyContent(子元件在主軸上的位置與對齊方式)
• flex-start：靠近主軸起點的位置
• center ：排列在主軸中間的位置
• flex-end ：靠近主軸終點的位置
• space-around ：調整子元件的位置，令其旁邊有足夠的空間
• space-between ：子元件位置平均分配放式，由起點平均到終點

4. Flexbox 相關屬性(二)
• https://reactnative.cn/docs/0.43/layout-with-flexbox.html#content
• alignItems(子元件在次軸[垂直主軸]上的排列方式)
• flex-start
• center
• flex-end
• stretch(子元件在次軸上，不能有固定尺寸)
• 其他重要屬性
• https://reactnative.cn/docs/0.43/layout-props.html

5. 思考與練習
• 使用 Text、TextInput 與 Button，做出登入畫面(配合 Flexbox)
XXXX 系統
帳號：
密碼：
登入 註冊