iT邦幫忙

expo相關文章
共有 48 則文章
鐵人賽 Mobile Development DAY 27

技術 Day 27 - 天氣 Icon 更新

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

鐵人賽 Mobile Development DAY 26

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

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

鐵人賽 Mobile Development DAY 24

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

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

鐵人賽 Mobile Development DAY 23

技術 Day 23 - 顯示現在時間

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

鐵人賽 Mobile Development DAY 22

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

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

鐵人賽 Mobile Development DAY 21

技術 Day 21 - 使用 Zustand 管理狀態

目前已經透過 OpenWeatherMap API 拿到現在的天氣資料,但是要怎麼將資料傳遞給 component 使用呢? 有以下幾種方式可以傳遞資料給 co...

鐵人賽 Mobile Development DAY 20

技術 Day 20 - 使用 OpenWeatherMap API - 目前天氣資料

上篇文章已經透過 Expo Location 取得目前所在地的經緯度,接下來就可以使用 OpenWeatherMap API 來取得目前的天氣資訊。 設定 .e...

鐵人賽 Mobile Development DAY 30

技術 Day 30 - 單人開發者之路 完結篇

本系列的最後一篇,就是要來復盤、探討以及揭開單人開發者之路的神秘面紗 這是首次參加鐵人賽,首次完成鐵人賽按下「發表文章」的表情 一起來玩emoji廚房做出酷酷...

鐵人賽 Mobile Development DAY 19

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

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

鐵人賽 Mobile Development DAY 18

技術 Day 18 - 重構 TypeScript icon 設定

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

鐵人賽 Mobile Development DAY 29

技術 Day 29 - Expo SDK 升級 & 後續維運甘苦談

本篇要來分享Expo App完成開發、上架後後續的一些維運、探討提供未來在接手維運React Native & Expo專案的你一些開發、維運方向👀 E...

鐵人賽 Mobile Development DAY 17

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

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

鐵人賽 Mobile Development DAY 27

技術 Day 27 - 使用Expo專案建置你的第一支iOS APP

本篇會使用Expo專案搭著React Native官方iOS打包說明(官方文件內容非常少...)帶你完成打包iOS App 注意:當你沒有Apple devel...

鐵人賽 Mobile Development DAY 16

技術 Day 16 - 申請使用 OpenWeather

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

鐵人賽 Mobile Development DAY 15

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

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

鐵人賽 Mobile Development DAY 25

技術 Day 25 - 使用Expo專案建置你的第一支Android APP

在你的APP有一定的規模後就是要建置給內部人員 or 客戶測試使用本篇會使用Expo專案搭著React Native官方Android打包說明帶你完成建置And...

鐵人賽 Mobile Development DAY 14

技術 Day 14 - 儲存待辦事項到本地儲存

當我們打造一個 Todo List App,希望是不管何時打開 App,我們之前所輸入的內容都會被保存下來,而不會因為重新開啟 App 而失去資料。 這篇文章將...

鐵人賽 Mobile Development DAY 13

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

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

鐵人賽 自我挑戰組 DAY 27
React Native 奇幻之旅 系列 第 27

技術 【DAY27】React Native - 應用上架前的準備工作

Android & iOS 上架前都需要對應用進行一些基本設置,比如:應用的package (Bundle ID)、版本、icon...等,這邊簡單分享...

鐵人賽 Mobile Development DAY 12

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

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

鐵人賽 Mobile Development DAY 23

技術 Day 23 - Expo Location 實作地理位置追蹤功能

本篇要來介紹Expo地理位置追蹤套件 - Expo Location講解在React Native Expo專案怎麼做到 一次性取得使用者位置 背景追蹤使用者...

鐵人賽 Mobile Development DAY 22

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

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

鐵人賽 自我挑戰組 DAY 26
React Native 奇幻之旅 系列 第 26

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

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

鐵人賽 Mobile Development DAY 11

技術 Day 11 - 使用 Expo 的 Icons 來增加用戶體驗

隨著手機界面設計的不斷進步,Icon 已經成為了增強使用者體驗的一個重要元素。它們不僅提供了視覺吸引力,還在功能性上為使用者提供了直觀的導引。在本篇文章中,我們...

鐵人賽 自我挑戰組 DAY 25
React Native 奇幻之旅 系列 第 25

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

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

鐵人賽 Mobile Development DAY 21

技術 Day 21 - Expo Barcode Scanner實作手機QRCode掃描功能

相信大家對於二維條碼(QR Code)並不陌生而在APP裡掃描QR Code更是大幅提升使用方便性 本篇要來使用Expo官方提供的Expo BarCodeSca...

鐵人賽 Mobile Development DAY 10

技術 Day 10 - 刪除待辦事項

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

鐵人賽 Mobile Development DAY 9

技術 Day 9 - 使用 Image 表示未新增

目前第一個專案已經超過一半的進度了,不過當我們的清單是空的時候,要怎麼呈現給使用者也是一個設計上的挑戰。所以今天,我們將學習如何使用 Image 來美化這個空白...

鐵人賽 Mobile Development DAY 8

技術 Day 8 - 如何使用 Checkbox 讓使用者勾選已完成

在前面的文章,我們已經建立了一個基礎的 Todo List,並且對輸入的待辦事項進行了一些優化。今天,我們將進一步擴充其功能,讓使用者能夠勾選已完成的待辦事項。...

鐵人賽 Mobile Development DAY 7

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

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