React Native 跨平台應用程式開發證書課程

介紹 React Native 是一個跨平台開發軟件，並說明混合式應用程式的基本概念。

比較 Expo 與 React Native Command Line 的差異，並建議新手使用 Expo 建立環境。

總結課程前段安裝的 Node.js、Expo CLI、VS Code 與 Android Studio 等四個主要工具。

使用 npx create-expo-app 指令在命令提示字元中建立全新的 React Native 專案資料夾。

輸入 npm run web 啟動本地伺服器，並於瀏覽器上即時預覽應用程式畫面。

介紹 React Native 的核心入口檔案 App.js，包含引入函式庫與輸出主程式結構。

學習如何宣告樣式表，並透過 style 屬性將文字大小與背景顏色等設定套用到組件上。

講解 justifyContent 與 alignItems 如何分別控制元件在垂直主軸與水平交錯軸的對齊。

實際測試 flex-start、center 與 flex-end 屬性對於畫面元件上、中、下位置的影響。

說明 margin (外部邊距) 與 padding (內部填充) 在元件排版與撐開空間時的作用與差異。

示範 space-between、space-around 與 space-evenly 在多個元件時如何自動分配剩餘空間。

在畫面上加入 Button 組件，並設定 onPress 事件來觸發按下按鈕後的互動反應。

解釋為何單純修改一般變數無法讓畫面跟著變動，帶入 React 狀態變數的核心設計邏輯。

實作 useState 掛鉤，宣告狀態變數與 setter 函數，讓按鈕點擊後能即時更新畫面文字。

示範如何匯入 Image 元件，並正確使用 require 語法將專案內的本地圖片載入至應用程式中。

介紹 React Native 純程式碼特性，並開始學習使用指令建立專案環境。

講解如何使用指令啟動 Web 伺服器並安裝 React Native Web 所需的相關套件。

示範如何建立自訂 Component，並學習匯入與匯出模組的語法。

引導將網路下載的圖片存放至專案的 asset 資料夾以便後續使用。

介紹如何使用 Image 元件，並透過 require 語法將本機圖片顯示於畫面上。

講解元件如何透過 Props 接收外部傳入的參數，使內容能根據參數改變。

示範在元件中加入 Button，並學習如何將父元件的函式傳遞給子元件觸發。

開啟新的 Expo 專案，為學習更進階的排版與動態渲染做準備。

示範如何啟動 Android 模擬器，並說明實體手機使用 Expo Go 測試的方法。

說明如何透過三元運算子與條件判斷，讓畫面根據不同情況顯示不同元件。

學習使用 React 的 useState Hook，建立可改變元件狀態的變數。

完成點擊按鈕即可更改狀態變數，進而動態切換畫面上顯示的貓狗元件。

再次建立新專案，準備講解如何將陣列資料轉換為列表元件。

詳細示範如何利用 JavaScript 的 map 函式，將陣列內的文字資料逐一渲染至畫面。

總結本日學習的 Component、Props、State 等核心觀念，並預告下一堂課將串接資料庫。

回顧如何開啟命令提示字元並使用 npx create-expo-app 指令建立空白專案。

講解如何建立獨立的子組件，並將其引入到主程式中渲染顯示。

示範如何將變數及 JavaScript 函數透過 Props 傳遞給子組件，並讓子組件呼叫。

介紹在接收 Props 時使用解構賦值語法，直接提取出需要的變數與函數。

講解類似 Android RecyclerView 的 FlatList 組件，並說明其基礎渲染屬性設定。

使用 JavaScript 內建的 fetch 函數發送網路請求，並取得 JSON 格式的資料。

把網路上獲取的資料存入狀態變數，並綁定為 FlatList 的 data 屬性進行渲染。

解釋 useEffect 第二個參數 (Dependency Array) 的功能，如何根據變數變化觸發函數。

說明在單一畫面 App 中實現多頁面切換效果的重要觀念與基本做法。

示範透過判斷 currentPage 的狀態值，使用三元運算子決定渲染哪個 Component。

在頁面中加入 TextInput 組件，並設定預設顯示文字 (placeholder)。

說明 TextInput 必須配合 value 與 onChangeText 屬性，才能持續更新狀態變數。

嘗試實作按下按鈕後將表單資料從第一版傳回父組件，再轉至第二版顯示的流程。

總結手動設計轉頁機制的困難點，預告後續將使用 useNavigation 套件簡化開發。

回顧上一節課的專案並使用命令提示字元準備開發環境與資料夾。

示範如何下達指令建立全新的 Expo 專案並啟動網頁伺服器進行測試。

透過提示詞要求 AI 生成不含導航套件的兩個基本頁面以了解資料傳遞原理。

安裝 React Navigation 套件並使用堆疊導航來實現頁面切換與參數傳遞。

透過 AI 生成 FlatList 結構，展示如何將陣列資料渲染為可點擊的清單。

結合 useEffect 從 JSON Placeholder 獲取遠端資料並更新至清單狀態中。

安裝 AsyncStorage 並示範如何將使用者的輸入資料轉為字串後存入本地端。

教導如何開啟瀏覽器的開發者工具，在 Local Storage 標籤中確認儲存的資料。

重新建立專案並匯入抽屜式導航套件，製作可以從側邊滑出的導航選單。

加入單選按鈕 (Radio Button) 與下拉選單 (Picker) 等表單控制項來收集使用者資料。

處理第三方單選按鈕產生的問題，並改用更為穩定的 Picker 控制項替代。

介紹 Bottom Tab Navigation，在應用程式下方加入分頁切換按鈕。

利用狀態管理與陣列展開運算子實作待辦事項的新增、讀取、更新與刪除功能。

加入刪除確認的 Modal Dialog Box，並設定編輯模式的切換與取消機制。

介紹 Expo Application Services，安裝 EAS CLI 並將應用程式打包上傳至雲端提供下載。