React Native App 設計與開發專題研習課程 004
2 likes219 views
本课程介绍了 React Native 的基本架构和开发实践，包括组件、props 和 state 的使用，样式和布局处理，以及文本输入和滚动视图的实现。强调了通过 JSX 嵌入 HTML 以简化元件与模板的关联。课程提供了多种思考与练习，以帮助学员掌握相关技术。
React Native App 設計與開發專題研習課程 004
- 3. index.android.js 與 index.ios.js • 註解 • Import • export default class FirstProject extends Component • 物件架構
- 4. 程式碼與 JSX • https://hulufei.gitbooks.io/react-tutorial/content/jsx.html • 簡單來說，React 認為組件才是王道，而元件是和範本緊密關聯的，元 件範本和元件邏輯分離讓問題複雜化了。顯而易見的道理，關鍵是怎麼 做？ • 所以就有了 JSX 這種語法，就是為了把 HTML 範本直接嵌入到 JS 代碼 裡面，這樣就做到了範本和元件關聯，但是 JS 不支持這種包含 HTML 的語法，所以需要通過工具將 JSX 編譯輸出成 JS 代碼才能使用。
- 5. props 與 state • https://reactnative.cn/docs/0.42/props.html#content • https://reactnative.cn/docs/0.42/state.html#content • props • 元件建立初期傳入 • 不可更動其值 • 由上一層傳入 • State • 元件自訂不同的key(名稱)與value(值) • 可在執行時，動態改變 • 元件內，利用 setState 來修改
- 6. 思考與練習 • 修改<Text>中的值，並觀察模擬器的結果 • 使用說明網站的範例，練習 props 與 state 的程式碼
- 7. style 與 height-and-width • https://reactnative.cn/docs/0.42/style.html#content • https://reactnative.cn/docs/0.42/height-and-width.html#content • style • 利用 styles 常數，來設定不同的樣式(高、寬、顏色、對齊…) • height-and-width • 指定寬高 • 彈性寬高
- 8. flexbox 與 layout 屬性 • https://reactnative.cn/docs/0.42/layout-with-flexbox.html#content • https://reactnative.cn/docs/0.42/layout-props.html • flexbox • 整體布局樣式 • Layout props • 觀察與使用不同的屬性
- 10. 文字輸入 • https://reactnative.cn/docs/0.42/handling-text-input.html#content • 文字輸入元件 • Placeholder • onChangeText 與 箭頭函數 • 這段的意義為何？ <Text style={{padding: 10, fontSize: 42}}> {this.state.text.split(' ').map((word) => word && '🍕').join(' ')} </Text>
- 11. ScrollView • https://reactnative.cn/docs/0.42/using-a-scrollview.html#content • 使用時機為何？ • 可否動態加入不同的元件？
- 12. 思考與練習 • 使用 FlexBox/ScrollView，使用 <Text> 與 <TextInput>， 做出登入畫面 • Button 元件 • https://reactnative.cn/docs/0.42/button.html#content