目前第一個專案已經超過一半的進度了，不過當我們的清單是空的時候，要怎麼呈現給使用者也是一個設計上的挑戰。所以今天，我們將學習如何使用 Image 來美化這個空白...
在前面的文章，我們已經建立了一個基礎的 Todo List，並且對輸入的待辦事項進行了一些優化。今天，我們將進一步擴充其功能，讓使用者能夠勾選已完成的待辦事項。...
昨天我們介紹了 React Native 和 Expo，並進行了環境設定和模擬器的設定。今天，會簡單介紹我們的第一個專案，一個新手工程師都會練習的 Todo L...
當我們打造一個 Todo List App，希望是不管何時打開 App，我們之前所輸入的內容都會被保存下來，而不會因為重新開啟 App 而失去資料。 這篇文章將...
Metro 的 Fast Refresh 功能 Metro 中重要 debug 功能就是支援 Fast Refresh ，這個功能供開發者即時的回應，讓使用者可...
React Native 提供一種名叫 Flexbox 的方式來管理版面， Flexbox 就像合併了網頁能使用 display: flex 搭配 flex-d...
現在開發手機app可以透過很多種方式，像是使用Kotlin（Android的官方開發語言）或是同時開發Android & Swift的Dart（用於Fl...
從上一篇文章可以知道 Fabric 渲染系統在新架構中擔任了生成 Shadow Tree 和使用 Yoga 引擎計算佈局重要的角色，接著這裡會分享 Fabric...
在 React Native 中，可以透過 Animations 達成動畫效果，而 Animations 又包括 Animated 和 LayoutAnimat...
認識 React Navigation 與建立路由表 在網站中我們會設定路由表來切換頁面，同樣的在 App 中也會有頁面切換的需求，而 React Naviga...
上一篇設定好了 Android 的開發環境與環境變數，這篇要來設置 iOS 的環境變數，過程中會使用到 Xcode。 設置 iOS 的環境變數 1. 在 Xco...
上一篇文章建立完 Navigator，這篇文章會示範實作 Search 的部分，讓使用者搜尋完地區之後，直接顯示該地區的天氣資訊。 設定狀態 在開始做 Sear...
上一篇已經把搜尋的功能完成了，但是搜尋的畫面看起來有點單調，所以這篇文章會使用 Lottie 動畫增加 App 的視覺效果。 Lottie 是什麼？ Lotti...
延續上一節的內容，這次換成製作開關抽屜的功能，在認識知識點之前，先來完成一個簡單的抽屜。 抽屜基本架構分成在外面的標題 title 、打開抽屜後顯示的內容 co...
目前已經可以做到怎麼新增待辦事項，不過我們都還沒讓其顯示在畫面上，所以今天要來示範如何在 App 中使用 FlatList。 為什麼選擇 FlatList？ 每...
useState 在背後做了什麼 先讓我們從 useState 認識起，他背後的原理其實是利用 JS 的陣列解構： const number = [1, 2];...
從 TouchableOpacity 認識事件處理 在上一段我們介紹了許多元件，不過並沒有介紹怎樣讓按鈕按下後執行某些事，或是怎樣改變 TextInput 的...
隨著手機界面設計的不斷進步，Icon 已經成為了增強使用者體驗的一個重要元素。它們不僅提供了視覺吸引力，還在功能性上為使用者提供了直觀的導引。在本篇文章中，我們...
今天要來介紹一個很有趣的效能監測工具 Flashlight，透過 Flashlight 可以查看正式環境的 APP 效能，不只你自己開發的 APP 可以看得到，...
在完成「永久性登入登出機制」時要來先講解一下兩項React Hook語法與資料儲存系統 本篇介紹的技術為 useEffect useContext Async...
https://sentry.io/ Sentry 是一個用於應用程式錯誤監控和追蹤的工具，可以很方便的捕獲應用中發生的錯誤並定位錯誤發生的檔案、程式碼，並...
本篇要來介紹Expo官方提供兩項元件 Expo Speech 語音功能 Expo Haptics 觸覺回饋功能 另外加碼介紹一項React Native 官...
現在畫面上的 Icon 都是暫時寫死固定的，跟目前的天氣資訊並不符合，所以這篇文章會示範如何運用 Expo Icon 來更新天氣 Icon。 了解 OpenWe...
從前幾篇文章分享了 React Native 開發團隊是如何透過新架構（New Architecture）去改善 React Native 應用程式的效能，那麼...
目前有蠻多可以利用的天氣 API，不管是免費或是付費的資料。這裡要介紹的天氣即時資訊的 API，他有免費的額度可以使用，以一個要作為個人專案來說非常足夠。我們會...
當頁面很多時，可進一步透過巢狀路由來管理頁面，讓頁面架構更清楚。以 Google Podcast 為例，下面有一個 Bottom Navigation 。其中媒...
要打包與上架 iOS App ，需要先有 app store 的開發者帳號，費用是每年 99 鎂。由於我是使用公司團隊帳號，申請流程就不在此教學中描述。 開始前...
內容很多的網站，時常會在右下角設計一個 onTop 按鈕。那要如何在 App 中達成，「按下某個按鈕，就滑到特定區塊」這種功能呢？ 首先，來拆解一下功能。我們需...
目前我們的 Todo List 已經達到最基本的輸入文字，而且顯示在畫面上。不過還是有很多可以改進的地方，例如什麼都不輸入或者是輸入空字串，按下新增按鈕的話，他...
使用者在操作 App 的過程中，某些行為例如刪除資料，如果讓使用者直接刪除，這可能會導致重要資料的遺失。 為了避免這種情況，提示使用者進行確認是一種普遍的做法。...
Bucky
Ashley
我是圈圈
bsj
peterlu
wtlcqb
iThome鐵人賽
看影片追技術