上篇有介紹「底部切換式分頁」React Navigation 其實還有提供「頂部切換式分頁」 大家可以先打開Line APP，然後點開LineToday左右滑動...
上一篇介紹了 Andriod 打包的方式，接著就是 iOS ，會先以 Xcode 的介面了解如何存擋、打包的你的應用程式，再來是將這一系列步驟使用 comman...
現在了解了如何打包 Andriod 的 APK 跟 iOS 的 IPA ，接下來要使用 Firebase 來發佈這些打包好的應用程式，以提供其他人安裝測試版應用...
當頁面很多時，可進一步透過巢狀路由來管理頁面，讓頁面架構更清楚。以 Google Podcast 為例，下面有一個 Bottom Navigation 。其中媒...
大家好！今天的目標是實現一個基本但非常重要的功能，新增一個表單來加入新的待辦事項。 一個表單最基本的會有一個輸入框還有一個按鈕，我們將會示範如何使用 React...
歡迎來到本系列文章的第三天！ 希望你已經對我們的第一個專案－Todo List App 有所期待。今天我們要談論的主題是 React Native 元件和樣式設...
日常在使用Facebook、Instagram、Line APP時是不是會看到下方能切換首頁、個人檔案、功能表、朋友及通知的選單那麼就讓我們實作切換式選單吧 ※...
從前幾篇文章分享了 React Native 開發團隊是如何透過新架構（New Architecture）去改善 React Native 應用程式的效能，那麼...
當我們的 React Native 開發到一個進度後，通常會將開發的這包程式碼打包成 Andorid 裝置可以安裝的 AAB 和 APK 檔案。那 AAB 是什...
在 React Navigation 中做路由設定 在手機中，有一些關於 App 導覽列的設定，例如左邊有返回鍵、中間呈現頁面標題等等，並且會根據 Androi...
本篇要實現「你滑掉我的APP，再點一次還是能進入首頁」那麼如何做到的呢讓我們開始一步步操作吧 ※本篇教學文稍長，稍微整理一下大綱 使用AsyncStorage...
上一篇設定好了 Android 的開發環境與環境變數，這篇要來設置 iOS 的環境變數，過程中會使用到 Xcode。 設置 iOS 的環境變數 1. 在 Xco...
認識 React Navigation 與建立路由表 在網站中我們會設定路由表來切換頁面，同樣的在 App 中也會有頁面切換的需求，而 React Naviga...
在完成「永久性登入登出機制」時要來先講解一下兩項React Hook語法與資料儲存系統 本篇介紹的技術為 useEffect useContext Async...
昨天我們介紹了 React Native 和 Expo，並進行了環境設定和模擬器的設定。今天，會簡單介紹我們的第一個專案，一個新手工程師都會練習的 Todo L...
為什麼要設置環境變數？一般軟體開發專案，會將環境設置成：Production 正式產品環境、 Staging 準正式環境、Development 開發環境、Te...
現在只剩一個問題，要怎樣讓下方的水果卡片，因不同的 filterType 篩選後渲染出來。 腦筋動比較快的人會想到，只要多設一個變數 filterFruits...
接續上篇 點選登入後，會跳出「登入成功」提示此時要將使用者導向首頁 那麼在React Native要如何做到「畫面導向」功能本篇會使用react-navigat...
在開發時很常會使用到非常多套件，但有時候這些套件的某些功能壞了、或是跟你所開發的環境衝突，套件的開發者沒有在維護了又或者是沒那麼快發布修正後的版本，那麼該怎麼辦...
從實作 Tab 選擇器認識陣列渲染（ map / &&） 目前為止我們已經學了一部分 JSX 、 React 和 React Native 的內...
接續上篇在版面完成後讓我們繼續完成登入功能吧 本篇會進入以下開發環節 Components 事件處理 useState 實際應用 登入基本防呆 將所有Com...
從建立第二個元件認識 Props 在 React 中我們時常會透過元件化，來增加程式碼的重用性，提升易維護性。舉例來說，好幾頁都會出現的搜尋欄、分類 tab 等...
本篇開始前 先附上需求洽談時真實情況 PM：登入畫面有頭緒嗎工程師：沒有，怎麼辦，要通靈嗎😔PM：你先做出一版讓我們看看好了 附上使用TailWind CS...
Logo box Logo box 是 React Native 0.63 推出的一個 debugg 功能，當你在開發環境進行開發過程中程式碼有錯誤，就會自動地...
useState 在背後做了什麼 先讓我們從 useState 認識起，他背後的原理其實是利用 JS 的陣列解構： const number = [1, 2];...
Metro 的 Fast Refresh 功能 Metro 中重要 debug 功能就是支援 Fast Refresh ，這個功能供開發者即時的回應，讓使用者可...
本篇會逐步講解NativeWind套件在React Native Expo專案安裝及使用 官網：https://www.nativewind.dev版本：2.0...
從 TouchableOpacity 認識事件處理 在上一段我們介紹了許多元件，不過並沒有介紹怎樣讓按鈕按下後執行某些事，或是怎樣改變 TextInput 的...
這邊我會先介紹 React Native 的 debug 工具有哪些？如何使用？最後會分享實戰如何透過 debug 工具解決問題。 Metro 先從官方文件預設...
專案使用的 React 全域狀態管理工具（State Management）是什麼？ 在 React Native 專案中狀態管理通常是必備的工具之一，但狀態管...
peterlu
Ashley
我是圈圈
Bucky
iThome鐵人賽
看影片追技術