React Native 線上課程教學影片

編程線上教學課程內容

React Native 是 Facebook 推出的跨平台行動應用開發框架，讓開發者使用 React 與 JavaScript 撰寫一次程式碼，即可同時部署到 iOS 與 Android 平台。
本課程在一小時內帶你從環境設定到建立完整 App，涵蓋元件設計、狀態管理、導航、API 串接與發佈流程。透過實作導向教學，學員將完成一個功能完整的待辦事項應用，理解 React Native 的核心概念與開發思維。

 

適合對象：

• 熟悉 React 或 JavaScript 的前端開發者

• 想學習跨平台行動應用開發的初學者

• 希望用單一程式碼庫支援 iOS 與 Android 的工程師

• 行動 App 創業或專案開發人員

---

 

一小時課程大綱

第一章：課程導入與開發環境設定（約 5 分鐘）

• React Native 簡介：一次開發、雙平台部署

• 與傳統原生開發（Swift / Kotlin）與混合式方案的比較

• 環境安裝：Node.js、React Native CLI、Android Studio、Xcode（macOS）

• 建立第一個專案：npx react-native init MyFirstApp

• 執行模擬器與真機測試流程

第二章：核心概念與第一個畫面（約 10 分鐘）

• React Native 三大核心：元件（Component）、狀態（State）、生命週期（Lifecycle）

• JSX 語法與樣式（StyleSheet）在 RN 中的應用

• 基本元件介紹：View、Text、Image、ScrollView

• 實作：建立歡迎畫面包含標題、圖片與按鈕

第三章：狀態管理與互動元件（約 10 分鐘）

• 使用 useState 管理元件狀態

• 表單元件：TextInput、Picker、Switch

• 互動元件：TouchableOpacity、Pressable、Button

• 事件處理：onPress、onChangeText

• 實作：互動計數器與文字輸入表單

第四章：導航與多畫面應用（約 10 分鐘）

• React Navigation 安裝與基本設定

• Stack Navigator、Tab Navigator 簡介

• 畫面參數傳遞與導航方法（navigation.navigate、navigation.goBack）

• 實作：建立首頁與詳細頁面的導航流程

第五章：列表與資料顯示（約 10 分鐘）

• FlatList 與 ScrollView 的差異與應用

• 動態資料渲染與 key 屬性

• 載入指示器（ActivityIndicator）與錯誤處理

• 實作：顯示待辦事項清單與動態新增功能

第六章：API 串接與非同步資料（約 10 分鐘）

• 使用 fetch 與 AsyncStorage 處理資料

• useEffect 生命週期鉤子應用

• 網路請求狀態管理（載入中、成功、失敗）

• 實作：從外部 API 獲取資料並顯示於列表

第七章：樣式與 UI 美化（約 5 分鐘）

• Flexbox 佈局系統在 RN 中的應用

• StyleSheet 效能優化

• 第三方 UI 元件庫：React Native Elements、NativeBase

• 暗黑模式與主題切換簡介

第八章：迷你專案實作與發佈（約 10 分鐘）

專案主題：完整待辦事項 App（To-Do List）
功能特色：

• 多畫面導航（首頁、詳細頁、設定）

• 新增／編輯／刪除待辦事項

• 本地儲存（AsyncStorage）

• 外部 API 同步功能

• 完整 UI 設計與動畫效果
  打包與發佈流程：Metro bundler、APK 生成、App Store 準備