React Native App設計與開發專題研習課程 006
0 likes192 views
本课程介绍了使用 React Native 进行程序开发，重点讲解了 flexbox 布局及其相关属性。课程内容包括子元件排列方式及对齐方式的详细说明，并提供了相应的练习任务。学员需使用 text、textinput 和 button 创建一个登录界面。
![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](https://image.slidesharecdn.com/app00620170415-171110100430/85/React-Native-App-006-4-320.jpg)
React Native App設計與開發專題研習課程 006
- 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 系統 帳號： 密碼： 登入 註冊