iT邦幫忙

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

技術 DAY 3 接手 React Native CLI 專案應該知道的事 - React Native CLI 篇

大部分的文章都是討論怎麼從 0 開始開發 React Native 專案,但其實真實的情況更多的是你必須從接手前人的 code 開發,假設有完整的文件可以查找,...

鐵人賽 Mobile Development DAY 5

技術 DAY 5 接手 React Native CLI 專案應該知道的事 - React 狀態管理工具 & React Navigation &應用程式上架憑證及金鑰

專案使用的 React 全域狀態管理工具(State Management)是什麼? 在 React Native 專案中狀態管理通常是必備的工具之一,但狀態管...

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

技術 DAY 16 React Native Android 上架前哨戰 - 使用 Google Play 商店發布測試

本篇將分享如何使用 Google play 發佈你要測試的 Android 應用程式。 情境: APP 的開發到一個段落了,即將要上架,想要在上架前做最後的確認...

鐵人賽 Mobile Development DAY 18

技術 Day 18 - React Native WebView 嵌入外部網頁

本篇開始前,還是來看一下真實的內部討論情況 PM:剩下十天,APP地圖功能還沒做,怎麼辦工程師:先使用WebView把現有網頁鑲嵌上去?PM:「越快越好」、「...

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

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

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

鐵人賽 Mobile Development DAY 4

技術 Day 04. 創建專案

創建專案的方法 現在可以在終端機試著用下述指令來創建專案:npx react-native init 專案名稱 啟動專案的方法 要啟動專案,讓他在模擬器運行,...

鐵人賽 Mobile Development DAY 17

技術 Day 17 - React Native Modal實作手機彈跳視窗

本篇要來介紹React Native核心Component Modal Modal 介紹 Modal 用於在當前畫面之上顯示一個疊加的子視窗通常用於顯示...

鐵人賽 Mobile Development DAY 3

技術 Day 03. 開發事前準備 iOS

為避免有的人查找資料時直接進入此頁,而不是直接跟著系列文閱讀,這邊還是簡短的前情提要一下: 在正式開始撰寫 React Native 專案前,根據使用的開發系統...

鐵人賽 Mobile Development DAY 10

技術 Day 10 - React Native APP登入功能製作(中) - 事件處理

接續上篇在版面完成後讓我們繼續完成登入功能吧 本篇會進入以下開發環節 Components 事件處理 useState 實際應用 登入基本防呆 將所有Com...

鐵人賽 Mobile Development DAY 14

技術 Day 14 - BottomTabNavigator實作底部切換式分頁

日常在使用Facebook、Instagram、Line APP時是不是會看到下方能切換首頁、個人檔案、功能表、朋友及通知的選單那麼就讓我們實作切換式選單吧 ※...

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

技術 DAY 17 上架 Android 應用程式到 Google Play Store

接續著 DAY 16 React Native Android 上架前哨戰 - 使用 Google Play 商店發布測試接下來就要把開發好的應用程式送審,經過...

鐵人賽 Mobile Development DAY 19

技術 Day 26. 認識 React Native Firebase

React Native Firebase 前置作業 React Native Firebase 是官方所推薦的函式庫,透過它開發者能輕鬆在 Firebase...

鐵人賽 Mobile Development DAY 19

技術 Day 27. 以 Notifee 與 React Native Firebase 實作遠端推播

在上一節中,我們已經認識 React Native Firebase 的 API ,也完成基本前置作業。在這節中我們會繼續用上一節的 RemoteNotific...

鐵人賽 Mobile Development DAY 2

技術 Day 02. 開發事前準備 Android

創建專案 在正式開始撰寫 React Native 專案前,需做一些事前準備。根據你所使用的開發系統( macOS 、 Windows 、 Linux)和要上架...

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

技術 DAY 15 使用 Firebase 發佈 React Native 測試版 APP - 發佈應用程式

使用 Firebase 發佈測試版本的應用程式的好處在於可以便於同時管理跨平台的應用程式,同時可用 Performance 的監控各項效能指標與使用 Crash...

鐵人賽 Mobile Development DAY 4

技術 Day 4 - 新增一個表單來加入新的待辦事項

大家好!今天的目標是實現一個基本但非常重要的功能,新增一個表單來加入新的待辦事項。 一個表單最基本的會有一個輸入框還有一個按鈕,我們將會示範如何使用 React...

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

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

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

鐵人賽 Mobile Development DAY 30

技術 Day 30 - 單人開發者之路 完結篇

本系列的最後一篇,就是要來復盤、探討以及揭開單人開發者之路的神秘面紗 這是首次參加鐵人賽,首次完成鐵人賽按下「發表文章」的表情 一起來玩emoji廚房做出酷酷...

鐵人賽 Mobile Development DAY 16

技術 Day 16 - React Native FlatList、RefreshControl 實作滑動式清單

本篇要來介紹React Native兩項核心Component FlatList RefreshControl 日常在FaceBook、Instgram、F...

鐵人賽 Mobile Development DAY 21

技術 Day 21 - 使用 Zustand 管理狀態

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

鐵人賽 Mobile Development DAY 3

技術 Day 3 - 介紹 React Native 元件以及樣式設定

歡迎來到本系列文章的第三天! 希望你已經對我們的第一個專案-Todo List App 有所期待。今天我們要談論的主題是 React Native 元件和樣式設...

鐵人賽 Mobile Development DAY 6

技術 Day 06. React Native 如何建立與調整樣式

那麼我們要如何為元件們上樣式呢? 如果你有用過 React 或 JSX ,可能會直覺想到在行內設定,就像這樣: <Text style={{color:...

鐵人賽 Mobile Development DAY 8

技術 DAY 8 React Native Debug 工具 - Logo box & Flipper

Logo box Logo box 是 React Native 0.63 推出的一個 debugg 功能,當你在開發環境進行開發過程中程式碼有錯誤,就會自動地...

鐵人賽 Mobile Development DAY 6

技術 DAY 6 React Native Debug 工具 - Metro (上)

這邊我會先介紹 React Native 的 debug 工具有哪些?如何使用?最後會分享實戰如何透過 debug 工具解決問題。 Metro 先從官方文件預設...

鐵人賽 Mobile Development DAY 28

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

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

鐵人賽 自我挑戰組 DAY 24
React Native 奇幻之旅 系列 第 24

技術 【DAY24】React Native Debugging 基本的調試工具和方法

常見的 DEBUG 方法/工具 內建的 Dev Menu,具備基本的 logs, network, inspect, JS debugger 功能。 Re...

鐵人賽 Mobile Development DAY 15

技術 Day 15 - MaterialTopTabsNavigator實作頂部切換式分頁

上篇有介紹「底部切換式分頁」React Navigation 其實還有提供「頂部切換式分頁」 大家可以先打開Line APP,然後點開LineToday左右滑動...

鐵人賽 Mobile Development DAY 5

技術 Day 05. 從 App.jsx 認識與建立第一個元件

開啟模擬器,會看到 React Native 已經幫我們建立了一個簡單的教學頁面,讓我們可以點擊連結,進入教學頁面跟著學習。不過整個程式碼架構對初學者來說應該太...

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

技術 DAY20 解析 React Native 現行架構(Current Architecture)原理

長久以來,React Native 的效能問題一直為人詬病,為了解決這個問題,React Native 開發團隊針對舊有的架構進行了重構,並在 0.68 版本推...

鐵人賽 Mobile Development DAY 20

技術 Day 20 - 使用 OpenWeatherMap API - 目前天氣資料

上篇文章已經透過 Expo Location 取得目前所在地的經緯度,接下來就可以使用 OpenWeatherMap API 來取得目前的天氣資訊。 設定 .e...