認識 React Native Platform 在開發雙平台 App 時，相信大家都有察覺到 Android iOS兩者在預設樣式上有所不同。例如 Heade...
認識 React Navigation 與建立路由表 在網站中我們會設定路由表來切換頁面，同樣的在 App 中也會有頁面切換的需求，而 React Naviga...
在這個章節我們要製作一個簡易的菜單收藏功能。當用戶按下收藏後，可以在收藏頁看到他收藏了哪些菜，並能刪除不要的收藏。 先製作兩個頁面元件，分別呈現菜單和收藏的內容...
使用者在操作 App 的過程中，某些行為例如刪除資料，如果讓使用者直接刪除，這可能會導致重要資料的遺失。 為了避免這種情況，提示使用者進行確認是一種普遍的做法。...
目前第一個專案已經超過一半的進度了，不過當我們的清單是空的時候，要怎麼呈現給使用者也是一個設計上的挑戰。所以今天，我們將學習如何使用 Image 來美化這個空白...
React Native 的架構演進 在 React Native 的早期版本中，資料在JavaScript和原生層之間的通訊是透過Bridge來進行。但由於需...
從前幾篇文章分享了 React Native 開發團隊是如何透過新架構（New Architecture）去改善 React Native 應用程式的效能，那麼...
在完成「永久性登入登出機制」時要來先講解一下兩項React Hook語法與資料儲存系統 本篇介紹的技術為 useEffect useContext Async...
由於 OpenWeatherMap API 需要提供經緯度，所以我們需要取得使用者的位置資訊，這時候就可以使用 Expo Location 來取得使用者的位置資...
按照進度，這篇文章會示範怎麼從 OpenWeatherMap 取得未來數小時的天氣預報，並且讓資料展示在畫面上。 了解 API 首先必須要先知道資料有哪些，以及...
當頁面很多時，可進一步透過巢狀路由來管理頁面，讓頁面架構更清楚。以 Google Podcast 為例，下面有一個 Bottom Navigation 。其中媒...
從 TouchableOpacity 認識事件處理 在上一段我們介紹了許多元件，不過並沒有介紹怎樣讓按鈕按下後執行某些事，或是怎樣改變 TextInput 的...
在日益複雜的前端開發環境中，如何有效地組織和管理程式碼，已成為前端工程師不可迴避的課題。今天，我們將深入探討模組化開發的重要性，以及如何運用 React 的 c...
昨天我們試著使用Expo啟動環境，今天我們使用React Native Cli來啟動環境。 什麼是React Native Cli? React Native...
內容很多的網站，時常會在右下角設計一個 onTop 按鈕。那要如何在 App 中達成，「按下某個按鈕，就滑到特定區塊」這種功能呢？ 首先，來拆解一下功能。我們需...
延續上一節的內容，這次換成製作開關抽屜的功能，在認識知識點之前，先來完成一個簡單的抽屜。 抽屜基本架構分成在外面的標題 title 、打開抽屜後顯示的內容 co...
這篇文章將會著重於建立 App 的 UI 架構，會使用一開始建立專案設定的 nativewind 和 tailwindcss 來快速地設計和實現 UI。 設計...
現在的 hourlyWeather 資料只有顯示 4 筆，感覺可以顯示更多，所以我們來使用 FlatList 來顯示更多資料。 FlatList FlatLis...
昨天我們在 RN裡面使用 fetch來串接 API和後端溝通註冊。但其實在實際上使用 RN串接API的時候不會只用一個 fetch 直接來串接這樣。 會用一些狀...
從製作語言切換功能，認識 Redux 前面我們曾介紹過 Props 能將父元件的資料傳到子元件。不過 Props 只能層層傳遞，無法在同層之間傳遞。例如當我要從...
目前畫面上的地區是固定的，但我們這個 App 是要顯示目前所在地區的天氣，所以這篇文章會示範如何取得目前所在地區的資料，並且顯示在畫面上。 如何取得目前所在地區...
開發網頁時，我們可以引入 FontAwesome 、 Material Icons 等，透過 Icons 美化畫面與增添豐富度，在 App ，同樣也能做到這件...
在 React Navigation 中做路由設定 在手機中，有一些關於 App 導覽列的設定，例如左邊有返回鍵、中間呈現頁面標題等等，並且會根據 Androi...
昨天介紹了pdf表單和 native-base的欄位。今天來實作 UI吧 產生範例 我們先請 AI 產生範例讓我們參考一下，看一下看起來的感覺操作看看是否合用。...
在任何 Todo List 的 App 中，除了新增和完成項目之外，刪除待辦事項也是一個非常重要的功能。畢竟隨著時間的推移，有些事項可能已經不再需要或是想要從清...
不敢相信我這次都把手機桌布改成記得發鐵人賽了，還可以忘記發文！！！連兩屆因為自己忘記斷賽，到底想怎樣！！！被自己氣死！！！ 索性一次把剩下的文章發完，成為最早發...
現在畫面上還未處理的區塊就剩下未來一星期的天氣還沒做了，這篇文章將會來示範如何處理這個區塊。 設定 API 在 Day 24 的文章中有提到，按照 OpenWe...
作為一名使用React的開發者，這次決定挑戰在30天內從零開始學習React Native這個跨平台開發，並且完整記錄整個學習過程。 React Native作...
從實作 Tab 選擇器認識陣列渲染（ map / &&） 目前為止我們已經學了一部分 JSX 、 React 和 React Native 的內...
昨天介紹了如何使用 React Native 的 Modal 來實作一個確認刪除的提示 Modal，今天要做的則是如何使用 Modal 來編輯原本的待辦事項。...
我是圈圈
Bucky
Felix阿甫
Ashley
peterlu
Tom Sir
iThome鐵人賽
看影片追技術