在本次的鐵人賽中,將帶領你走入 React Native 與 Expo 的世界,一起在 30 天內完成兩個跨平台應用專案。這個系列會由淺入深,逐步導向實際的應用程式開發。會透過實際的操作,學習 React Native 與 Expo 的強大功能,並學會如何將它們應用在真正的專案上。
目前已經透過 OpenWeatherMap API 拿到現在的天氣資料,但是要怎麼將資料傳遞給 component 使用呢? 有以下幾種方式可以傳遞資料給 co...
目前畫面上的地區是固定的,但我們這個 App 是要顯示目前所在地區的天氣,所以這篇文章會示範如何取得目前所在地區的資料,並且顯示在畫面上。 如何取得目前所在地區...
現在 HeadInfo 的時間是固定的,看起來不太真實,所以我們要改成顯示現在的時間。 安裝 dayjs 處理時間的 JS 套件很多,例如 moment、da...
按照進度,這篇文章會示範怎麼從 OpenWeatherMap 取得未來數小時的天氣預報,並且讓資料展示在畫面上。 了解 API 首先必須要先知道資料有哪些,以及...
現在的 hourlyWeather 資料只有顯示 4 筆,感覺可以顯示更多,所以我們來使用 FlatList 來顯示更多資料。 FlatList FlatLis...
現在畫面上還未處理的區塊就剩下未來一星期的天氣還沒做了,這篇文章將會來示範如何處理這個區塊。 設定 API 在 Day 24 的文章中有提到,按照 OpenWe...
現在畫面上的 Icon 都是暫時寫死固定的,跟目前的天氣資訊並不符合,所以這篇文章會示範如何運用 Expo Icon 來更新天氣 Icon。 了解 OpenWe...
目前預計的功能還少了搜尋城市,並且顯示該城市的天氣資訊,不過搜尋的部分應該放在哪裡比較好呢?思考了一下,可以運用 React Navigation 來實作一個...
上一篇文章建立完 Navigator,這篇文章會示範實作 Search 的部分,讓使用者搜尋完地區之後,直接顯示該地區的天氣資訊。 設定狀態 在開始做 Sear...
上一篇已經把搜尋的功能完成了,但是搜尋的畫面看起來有點單調,所以這篇文章會使用 Lottie 動畫增加 App 的視覺效果。 Lottie 是什麼? Lotti...