iT邦幫忙

react-native相關文章
共有 308 則文章
鐵人賽 Mobile Development DAY 25

技術 [Day25] 使用 NativeBase 實作表單 with AI 協作

昨天介紹了pdf表單和 native-base的欄位。今天來實作 UI吧 產生範例 我們先請 AI 產生範例讓我們參考一下,看一下看起來的感覺操作看看是否合用。...

鐵人賽 Mobile Development DAY 23

技術 [Day23] React native call api 後發生了什麼事?架構設計與流程說明

今天我們要來講一下關於 redux action app 架構設計。我們專案使用的 redux 工具是 redux-toolkit 按下送出後發生了什麼事?...

鐵人賽 Mobile Development DAY 22

技術 [Day22] React Native APP Token 認證相關

昨天我們使用 chatgpt 幫我們在 react native 裡面串接 api,不過老實說有點太粗糙。我今天試了一天,如果使用AI要求他修改成想要的形式,會...

鐵人賽 Mobile Development DAY 16

技術 [DAY16] 使用 Redux 狀態管理

昨天我們在 RN裡面使用 fetch來串接 API和後端溝通註冊。但其實在實際上使用 RN串接API的時候不會只用一個 fetch 直接來串接這樣。 會用一些狀...

鐵人賽 Mobile Development DAY 9

技術 [Day09] 魔法的本質:使用GPT幫你變出註冊頁面

魔法的本質就是心想事成,如果連想都不敢想的話,就不會實現。 如果我和你們說其實不需要會寫程式,只需要會說你想要什麼電腦會幫你做出你想要的東西,你們相信嗎?這也是...

鐵人賽 Mobile Development DAY 6

技術 [Day06] 專案技術評估與規劃

今天,我們會介紹這次專案對我來說比較難的有挑戰的點,接著再將功能細分規劃實作。將一個大項目拆成很多小項目也是一個必要的技能。 挑戰點 我背景是在工廠擔任研發工程...

鐵人賽 Mobile Development DAY 5
從零開始學React Native 系列 第 5

技術 【從零開始學React Native】4.React Native環境架設(React Native Cli)

昨天我們試著使用Expo啟動環境,今天我們使用React Native Cli來啟動環境。 什麼是React Native Cli? React Native...

鐵人賽 Mobile Development DAY 4
從零開始學React Native 系列 第 4

技術 【從零開始學React Native】3.React Native環境架設(Expo)

今天我們將介紹如何在Windows上搭建React Native開發環境。並且我們這裡會使用winget來安裝必要的工具,設置Android Studio,並使...

鐵人賽 Mobile Development DAY 3
從零開始學React Native 系列 第 3

技術 【從零開始學React Native】2.React Native的運作與架構

React Native 的架構演進 在 React Native 的早期版本中,資料在JavaScript和原生層之間的通訊是透過Bridge來進行。但由於需...

鐵人賽 Mobile Development DAY 2
從零開始學React Native 系列 第 2

技術 【從零開始學React Native】1. React Native簡介

什麼是 React Native? RN是由Meta推出的一個開源框架,讓開發者可以透過React來構建跨平台的移動應用程式。來達到一次編寫,處處運行的需求。利...

鐵人賽 Mobile Development DAY 1
從零開始學React Native 系列 第 1

技術 【從零開始學React Native】0.前言

作為一名使用React的開發者,這次決定挑戰在30天內從零開始學習React Native這個跨平台開發,並且完整記錄整個學習過程。 React Native作...

鐵人賽 Mobile Development DAY 30

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

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

鐵人賽 Mobile Development DAY 29

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

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

鐵人賽 Mobile Development DAY 28

技術 Day 28 - 使用 React Navigation 切換頁面

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

鐵人賽 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 25

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

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

鐵人賽 Mobile Development DAY 24

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

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

鐵人賽 Mobile Development DAY 23

技術 Day 23 - 顯示現在時間

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

React Native CLI 開發心法 系列 第 31

技術 DAY31 - 鐵人賽回顧與完賽感想

回顧 透過這一系列的文章一一介紹了使用 React Native Cli 開發的各個面向以及其背後的原理,我將這 30 天的文章做以下幾個分類: 認識與學習...

鐵人賽 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 29
React Native CLI 開發心法 系列 第 29

技術 DAY 29 React Native 效能優化:提升效能實戰(三)& 效能優化總結

延續上一篇優化程式碼的實例,還剩下一個地方需要改善,那就是圖片。 使用圖片快取 (Cache Images) 透過 Cache 減少發送網路請求而且可以更快的載...

鐵人賽 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 30
React Native CLI 開發心法 系列 第 30

技術 DAY 30 React Native 版本升級實戰 : 填坑之旅

React Natvie 版本升級一直是開發上很痛苦的一部分,常常一升級就會有 dependency 壞掉,修了東就壞了西的窘況,在這篇文章中,筆者會分享升級...

鐵人賽 Mobile Development DAY 28
React Native CLI 開發心法 系列 第 28

技術 DAY 28 React Native 效能優化:提升效能實戰(二)

接續上一篇 DAY 27 React Native 效能優化:提升效能實戰 (一)接下來會用程式碼範例來說明如何優化 React Native 的效能~ 要優化...