iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
Mobile Development

從零開始學React Native 系列

之前已經挑戰接觸過不同的跨平台開發工具,這次決定挑戰React Native,目標是在30天內從零開始,逐步打造一個簡易的應用程式。這個系列文章將記錄我的學習心得,希望能掌握一項新的技術!

參賽天數 20 天 | 共 20 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文
DAY 1

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

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

2024-09-15 ‧ 由 Felix阿甫 分享
DAY 2

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

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

2024-09-16 ‧ 由 Felix阿甫 分享
DAY 3

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

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

2024-09-17 ‧ 由 Felix阿甫 分享
DAY 4

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

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

2024-09-18 ‧ 由 Felix阿甫 分享
DAY 5

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

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

2024-09-19 ‧ 由 Felix阿甫 分享
DAY 6

【從零開始學React Native】5. 創建Todo Tracker——規劃

1. 專案概述 我們這次會創建一個Android的Todo Tracker應用,並且該應用提供用戶來管理日常任務。並且可以離線或雲端同步這樣,下面我們先簡單規劃...

2024-09-20 ‧ 由 Felix阿甫 分享
DAY 7

【從零開始學React Native】6. 創建Todo Tracker——創建頁面

現在我們先看一下我們使用React Native Cli建立出來的專案架構。 現在我們執行指令啟動專案pnpm run start,並在終端上點a啟動andr...

2024-09-21 ‧ 由 Felix阿甫 分享
DAY 8

【從零開始學React Native】7. 創建Todo Tracker——創建其他頁面

今天我們來創建其他的頁面。任務新增頁、圖表頁、設定頁、任務詳情頁。這裡會使用一些套件來進行修改調整。 創建頁面 安裝'react-native-safe-are...

2024-09-22 ‧ 由 Felix阿甫 分享
DAY 9

【從零開始學React Native】8. 創建Todo Tracker——改進首頁頁面

今天我們來稍微改進我們的首頁。首先創建Task的type。 src\types\index.ts export type Task = { id: st...

2024-09-23 ‧ 由 Felix阿甫 分享
DAY 10

【從零開始學React Native】9. 創建Todo Tracker——添加狀態管理和調整新增頁面

今天我們來添加一些套件來管理狀態,並且調整我們的頁面。 安裝套件 現在我們安裝一些套件,jotai zod react-native-gesture-handl...

2024-09-24 ‧ 由 Felix阿甫 分享