技術 Day 22 - Expo 語音功能、觸覺回饋、震動功能應用

本篇要來介紹Expo官方提供兩項元件 Expo Speech 語音功能 Expo Haptics 觸覺回饋功能 另外加碼介紹一項React Native 官...

技術 【DAY25】React Native 使用 Sentry 監控錯誤、異常和性能

https://sentry.io/ Sentry 是一個用於應用程式錯誤監控和追蹤的工具，可以很方便的捕獲應用中發生的錯誤並定位錯誤發生的檔案、程式碼，並...

技術 Day 16 - 申請使用 OpenWeather

目前有蠻多可以利用的天氣 API，不管是免費或是付費的資料。這裡要介紹的天氣即時資訊的 API，他有免費的額度可以使用，以一個要作為個人專案來說非常足夠。我們會...

技術 Day 27 - 天氣 Icon 更新

現在畫面上的 Icon 都是暫時寫死固定的，跟目前的天氣資訊並不符合，所以這篇文章會示範如何運用 Expo Icon 來更新天氣 Icon。 了解 OpenWe...

技術 Day 12 - 使用 Modal 提示使用者是否刪除

使用者在操作 App 的過程中，某些行為例如刪除資料，如果讓使用者直接刪除，這可能會導致重要資料的遺失。 為了避免這種情況，提示使用者進行確認是一種普遍的做法。...

技術 Day 7 - 避免使用者輸入空字串

目前我們的 Todo List 已經達到最基本的輸入文字，而且顯示在畫面上。不過還是有很多可以改進的地方，例如什麼都不輸入或者是輸入空字串，按下新增按鈕的話，他...

技術 【DAY26】EXPO + Github Action 自動化構建 React Native 應用

這篇文章會分享的是使用 Expo + Github action 實現自動 eas update 和 eas build，主要目的是學會使用 Github ac...

技術 Day 15 - 第二個 App 簡介與專案 Tailwind CSS 設定

今天已經是第 15 天了，轉眼間鐵人賽也達成了二分之一的進度。 今天開始要來實作第二個專案，我們要來做的是一個即時天氣 App。這次除了一樣使用 React N...

技術 Day 19 - 簡單定位 - Expo Location

由於 OpenWeatherMap API 需要提供經緯度，所以我們需要取得使用者的位置資訊，這時候就可以使用 Expo Location 來取得使用者的位置資...

技術 Day 24 - 處理未來時間的氣象預報

按照進度，這篇文章會示範怎麼從 OpenWeatherMap 取得未來數小時的天氣預報，並且讓資料展示在畫面上。 了解 API 首先必須要先知道資料有哪些，以及...

技術 Day 17 - 建立 Weather App UI 架構

這篇文章將會著重於建立 App 的 UI 架構，會使用一開始建立專案設定的 nativewind 和 tailwindcss 來快速地設計和實現 UI。 設計...

技術 Day 13 - 使用 Modal 編輯待辦事項

昨天介紹了如何使用 React Native 的 Modal 來實作一個確認刪除的提示 Modal，今天要做的則是如何使用 Modal 來編輯原本的待辦事項。...

技術 Day 10 - 刪除待辦事項

在任何 Todo List 的 App 中，除了新增和完成項目之外，刪除待辦事項也是一個非常重要的功能。畢竟隨著時間的推移，有些事項可能已經不再需要或是想要從清...

技術 Day 22 - 使用 Geocoding 顯示目前地區

目前畫面上的地區是固定的，但我們這個 App 是要顯示目前所在地區的天氣，所以這篇文章會示範如何取得目前所在地區的資料，並且顯示在畫面上。 如何取得目前所在地區...

技術 Day 26 - 處理未來一星期的天氣預報

現在畫面上還未處理的區塊就剩下未來一星期的天氣還沒做了，這篇文章將會來示範如何處理這個區塊。 設定 API 在 Day 24 的文章中有提到，按照 OpenWe...

技術 Day 18 - 重構 TypeScript icon 設定

由於目前 HourlyForecast 和 DailyForecast 當中的 icon 設定部分都是重複的，看起來可以共用，因此我們可以將這部分抽出來，變成一...

技術 Day 23 - 顯示現在時間

現在 HeadInfo 的時間是固定的，看起來不太真實，所以我們要改成顯示現在的時間。 安裝 dayjs 處理時間的 JS 套件很多，例如 moment、da...