本篇要實現「你滑掉我的APP，再點一次還是能進入首頁」那麼如何做到的呢讓我們開始一步步操作吧 ※本篇教學文稍長，稍微整理一下大綱 使用AsyncStorage...
昨天我們介紹了 React Native 和 Expo，並進行了環境設定和模擬器的設定。今天，會簡單介紹我們的第一個專案，一個新手工程師都會練習的 Todo L...
認識 React Navigation 與建立路由表 在網站中我們會設定路由表來切換頁面，同樣的在 App 中也會有頁面切換的需求，而 React Naviga...
在完成「永久性登入登出機制」時要來先講解一下兩項React Hook語法與資料儲存系統 本篇介紹的技術為 useEffect useContext Async...
為什麼要設置環境變數？一般軟體開發專案，會將環境設置成：Production 正式產品環境、 Staging 準正式環境、Development 開發環境、Te...
哈囉，大家好，歡迎開始我們 30 天的 React Native 與 Expo 之旅！ 今天我們將會從最基本的開始，了解 React Native 與 Expo...
現在只剩一個問題，要怎樣讓下方的水果卡片，因不同的 filterType 篩選後渲染出來。 腦筋動比較快的人會想到，只要多設一個變數 filterFruits...
接續上篇 點選登入後，會跳出「登入成功」提示此時要將使用者導向首頁 那麼在React Native要如何做到「畫面導向」功能本篇會使用react-navigat...
在開發時很常會使用到非常多套件，但有時候這些套件的某些功能壞了、或是跟你所開發的環境衝突，套件的開發者沒有在維護了又或者是沒那麼快發布修正後的版本，那麼該怎麼辦...
從實作 Tab 選擇器認識陣列渲染（ map / &&） 目前為止我們已經學了一部分 JSX 、 React 和 React Native 的內...
接續上篇在版面完成後讓我們繼續完成登入功能吧 本篇會進入以下開發環節 Components 事件處理 useState 實際應用 登入基本防呆 將所有Com...
Logo box Logo box 是 React Native 0.63 推出的一個 debugg 功能，當你在開發環境進行開發過程中程式碼有錯誤，就會自動地...
從建立第二個元件認識 Props 在 React 中我們時常會透過元件化，來增加程式碼的重用性，提升易維護性。舉例來說，好幾頁都會出現的搜尋欄、分類 tab 等...
本篇開始前 先附上需求洽談時真實情況 PM：登入畫面有頭緒嗎工程師：沒有，怎麼辦，要通靈嗎😔PM：你先做出一版讓我們看看好了 附上使用TailWind CS...
Metro 的 Fast Refresh 功能 Metro 中重要 debug 功能就是支援 Fast Refresh ，這個功能供開發者即時的回應，讓使用者可...
useState 在背後做了什麼 先讓我們從 useState 認識起，他背後的原理其實是利用 JS 的陣列解構： const number = [1, 2];...
現在開發手機app可以透過很多種方式，像是使用Kotlin（Android的官方開發語言）或是同時開發Android & Swift的Dart（用於Fl...
本篇會逐步講解NativeWind套件在React Native Expo專案安裝及使用 官網：https://www.nativewind.dev版本：2.0...
這邊我會先介紹 React Native 的 debug 工具有哪些？如何使用？最後會分享實戰如何透過 debug 工具解決問題。 Metro 先從官方文件預設...
從 TouchableOpacity 認識事件處理 在上一段我們介紹了許多元件，不過並沒有介紹怎樣讓按鈕按下後執行某些事，或是怎樣改變 TextInput 的...
專案使用的 React 全域狀態管理工具（State Management）是什麼？ 在 React Native 專案中狀態管理通常是必備的工具之一，但狀態管...
「開發的時候多想想，可以走捷徑時絕對不會繞遠路」 本篇要來介紹一款前端CSS框架「Tailwind CSS」 Tailwind CSS 是什麼? 官方網站：ht...
那麼 React Native 還有提供給我們什麼元件呢？讓我們繼續用剛才的 App.jsx 實做看看。 Image 顧名思義代表圖片，載入方式有兩種：圖片放在...
接續上篇components、JSX介紹後React官方描述的核心概念還有下面兩項 props state 這兩項核心會介紹比較長因為這是後續開發使用者體驗...
留意專案目前使用的 React Native 版本 React Native 版本很重要，根據 React Native 的版本號不同，所支援的功能、環境、套件...
React Native 提供一種名叫 Flexbox 的方式來管理版面， Flexbox 就像合併了網頁能使用 display: flex 搭配 flex-d...
接述前篇建立完專案接著就是進入探索程式碼的世界了 React Native官方建議在入門前先補充React的核心概念 https://reactnative....
大部分的文章都是討論怎麼從 0 開始開發 React Native 專案，但其實真實的情況更多的是你必須從接手前人的 code 開發，假設有完整的文件可以查找，...
那麼我們要如何為元件們上樣式呢？ 如果你有用過 React 或 JSX ，可能會直覺想到在行內設定，就像這樣： <Text style={{color:...
接下來會主要以Windows作業系統指令與Expo 49版本(2023.06.29官方最新版本)做為後續開發講解※在Expo版本升級後，指令會有些微誤差，但不影...
peterlu
Bucky
我是圈圈
Ashley
bsj
iThome鐵人賽
看影片追技術