上一篇設定好了 Android 的開發環境與環境變數，這篇要來設置 iOS 的環境變數，過程中會使用到 Xcode。 設置 iOS 的環境變數 1. 在 Xco...
從上一篇文章可以知道 Fabric 渲染系統在新架構中擔任了生成 Shadow Tree 和使用 Yoga 引擎計算佈局重要的角色，接著這裡會分享 Fabric...
在 React Native 中，可以透過 Animations 達成動畫效果，而 Animations 又包括 Animated 和 LayoutAnimat...
接下來要為 Android App 加上 icon，回到 icon 的資料夾： Android 點進 android 資料夾後，到以下路徑 android/a...
上一篇文章建立完 Navigator，這篇文章會示範實作 Search 的部分，讓使用者搜尋完地區之後，直接顯示該地區的天氣資訊。 設定狀態 在開始做 Sear...
當我們打造一個 Todo List App，希望是不管何時打開 App，我們之前所輸入的內容都會被保存下來，而不會因為重新開啟 App 而失去資料。 這篇文章將...
那麼我們要如何為元件們上樣式呢？ 如果你有用過 React 或 JSX ，可能會直覺想到在行內設定，就像這樣： <Text style={{color:...
Hello 大家好我是 Edmond，大家在疫情期間是否感受到滿滿的孤獨感呢？又是否突然發現，自己其實滿適合一個人的呢？（大錯。本次想要來跟大家介紹一個人的開發...
創建專案 在正式開始撰寫 React Native 專案前，需做一些事前準備。根據你所使用的開發系統（ macOS 、 Windows 、 Linux）和要上架...
現在有了 LOGO 也有了 APP 專案，我們就可以先把 APP 的 icon 放到我們的 APP 中了！以下是先前轉出的檔案： iOS 點進去 iOS 資料...
上篇文章已經透過 Expo Location 取得目前所在地的經緯度，接下來就可以使用 OpenWeatherMap API 來取得目前的天氣資訊。 設定 .e...
隨著手機界面設計的不斷進步，Icon 已經成為了增強使用者體驗的一個重要元素。它們不僅提供了視覺吸引力，還在功能性上為使用者提供了直觀的導引。在本篇文章中，我們...
今天我們將介紹如何在Windows上搭建React Native開發環境。並且我們這裡會使用winget來安裝必要的工具，設置Android Studio，並使...
大家好！今天的目標是實現一個基本但非常重要的功能，新增一個表單來加入新的待辦事項。 一個表單最基本的會有一個輸入框還有一個按鈕，我們將會示範如何使用 React...
魔法的本質就是心想事成，如果連想都不敢想的話，就不會實現。 如果我和你們說其實不需要會寫程式，只需要會說你想要什麼電腦會幫你做出你想要的東西，你們相信嗎？這也是...
在前面的文章，我們已經建立了一個基礎的 Todo List，並且對輸入的待辦事項進行了一些優化。今天，我們將進一步擴充其功能，讓使用者能夠勾選已完成的待辦事項。...
第 18 天～ 昨天已經把畫面給佈置好了 有了畫面，但是沒有任何的邏輯，所以現在任何操作其實都不會有相關的邏輯 今天我們來把相關的邏輯給建立起來， react...
阿毛
‧
2021-10-03
React Native 提供一種名叫 Flexbox 的方式來管理版面， Flexbox 就像合併了網頁能使用 display: flex 搭配 flex-d...
現在 HeadInfo 的時間是固定的，看起來不太真實，所以我們要改成顯示現在的時間。 安裝 dayjs 處理時間的 JS 套件很多，例如 moment、da...
15 天了，沒想到過半了，再接再厲～～ 講了幾天的 React ， 現在讓我們把焦點拉回 React Native React Native 是跨平台的， 雖然...
阿毛
‧
2021-09-30
Logo box Logo box 是 React Native 0.63 推出的一個 debugg 功能，當你在開發環境進行開發過程中程式碼有錯誤，就會自動地...
完成 App 後，就要準備打包與上架了。首先來看打包 Android App 的步驟： 在 gitignore 加上 *.keystore 否則會有資安問題...
useState 在背後做了什麼 先讓我們從 useState 認識起，他背後的原理其實是利用 JS 的陣列解構： const number = [1, 2];...
今天已經是第 15 天了，轉眼間鐵人賽也達成了二分之一的進度。 今天開始要來實作第二個專案，我們要來做的是一個即時天氣 App。這次除了一樣使用 React N...
目前我們的 Todo List 已經達到最基本的輸入文字，而且顯示在畫面上。不過還是有很多可以改進的地方，例如什麼都不輸入或者是輸入空字串，按下新增按鈕的話，他...
開啟模擬器，會看到 React Native 已經幫我們建立了一個簡單的教學頁面，讓我們可以點擊連結，進入教學頁面跟著學習。不過整個程式碼架構對初學者來說應該太...
現在畫面上的 Icon 都是暫時寫死固定的，跟目前的天氣資訊並不符合，所以這篇文章會示範如何運用 Expo Icon 來更新天氣 Icon。 了解 OpenWe...
主要的身份驗證部分在前兩天已經寫完了，這篇要分享的是我在過程中遇到的問題以及解決方式。 修改驗證信內容 這是驗證信預設的內容： 如果想要修改的話，可以到 Am...
目前已經可以做到怎麼新增待辦事項，不過我們都還沒讓其顯示在畫面上，所以今天要來示範如何在 App 中使用 FlatList。 為什麼選擇 FlatList？ 每...
Metro 的 Fast Refresh 功能 Metro 中重要 debug 功能就是支援 Fast Refresh ，這個功能供開發者即時的回應，讓使用者可...
Ashley
我是圈圈
Edmond
Bucky
Felix阿甫
Tom Sir
wtlcqb
iThome鐵人賽
看影片追技術