使用 React Native 開發 App 教學

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

2. React Native 程式開發(1)
基本架構說明與實作

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
• 觀察與使用不同的屬性

9. 思考與練習
• 一個良好操作的布局為何？
• 您的專案畫面會長得如何？

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