iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Mobile Development

掌握 React Native 與 Expo:30天雙打,新手也能精通跨平台開發! 系列

在本次的鐵人賽中,將帶領你走入 React Native 與 Expo 的世界,一起在 30 天內完成兩個跨平台應用專案。這個系列會由淺入深,逐步導向實際的應用程式開發。會透過實際的操作,學習 React Native 與 Expo 的強大功能,並學會如何將它們應用在真正的專案上。

鐵人鍊成 | 共 30 篇文章 | 7 人訂閱 訂閱系列文 RSS系列文 團隊大船要開囉
DAY 21

Day 21 - 使用 Zustand 管理狀態

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

2023-10-06 ‧ 由 Bucky 分享
DAY 22

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

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

2023-10-07 ‧ 由 Bucky 分享
DAY 23

Day 23 - 顯示現在時間

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

2023-10-08 ‧ 由 Bucky 分享
DAY 24

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

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

2023-10-09 ‧ 由 Bucky 分享
DAY 25

Day 25 - 使用 useWindowDimensions 讓元件自適應螢幕寬度

現在的 hourlyWeather 資料只有顯示 4 筆,感覺可以顯示更多,所以我們來使用 FlatList 來顯示更多資料。 FlatList FlatLis...

2023-10-10 ‧ 由 Bucky 分享
DAY 26

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

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

2023-10-11 ‧ 由 Bucky 分享
DAY 27

Day 27 - 天氣 Icon 更新

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

2023-10-12 ‧ 由 Bucky 分享
DAY 28

Day 28 - 使用 React Navigation 切換頁面

目前預計的功能還少了搜尋城市,並且顯示該城市的天氣資訊,不過搜尋的部分應該放在哪裡比較好呢?思考了一下,可以運用 React Navigation 來實作一個...

2023-10-13 ‧ 由 Bucky 分享
DAY 29

Day 29 - 顯示指定城市的天氣資訊

上一篇文章建立完 Navigator,這篇文章會示範實作 Search 的部分,讓使用者搜尋完地區之後,直接顯示該地區的天氣資訊。 設定狀態 在開始做 Sear...

2023-10-14 ‧ 由 Bucky 分享
DAY 30

Day 30 - 使用 Lottie 動畫增加 App 視覺效果

上一篇已經把搜尋的功能完成了,但是搜尋的畫面看起來有點單調,所以這篇文章會使用 Lottie 動畫增加 App 的視覺效果。 Lottie 是什麼? Lotti...

2023-10-15 ‧ 由 Bucky 分享