iT邦幫忙

2024 iThome 鐵人賽

DAY 5
0
Mobile Development

從零開始學React Native系列 第 5

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

  • 分享至 

  • xImage
  •  

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

什麼是React Native Cli?

React Native Cli是React Native官方提供的命令行工具,用於創建和管理React Native項目。允許開發者直接與原生代碼交互,提供了更多的靈活性和控制權。

與Expo的差別?

靈活性:React Native Cli提供更多對原生代碼的控制,而Expo則提供了一個更簡化的開發環境。

學習曲線:React Native Cli的設置過程較為複雜,需要配置多個依賴項;Expo則簡化了這個過程。

構建過程:React Native Cli需要你自己管理構建過程;Expo則處理了大部分構建細節。

如何選擇:Expo vs React Native CLI

選擇Expo的情境:

  • 初學者或想要快速製作原型
  • 應用不需要大量訪問底層設備功能
  • 希望利用Expo生態系統提供的便利功能
  • 項目規模較小或是概念驗證階段

選擇React Native CLI的情境:

  • 需要訪問特定的原生模塊或想要整合複雜的第三方庫
  • 需要對構建過程、性能優化或定制選項進行精細控制
  • 您有原生應用開發經驗或想深入學習React Native的底層原理
  • 項目有特殊的硬件需求或需要使用Expo不支持的API
  • 需要更高的性能或更小的應用大小

Expo近年來已經解決了許多早期的限制。通過Expo的prebuild功能,從Expo項目轉換到完全原生項目變得更加容易。

React Native Cli環境架設

JDK、Android SDK、Emulator都照前一篇進行設置。JAVA_HOME、ANDROID_HOME等環境變量也照先前進行設置

接下來我們開始使用React Native Cli來進行測試

創建新項目:

pnpm dlx react-native init MyTest

進入項目目錄並啟動Metro bundler,Metro與 Vite 和 webpack 等bundler類似,他是使用 Babel 將 JSX 等語法轉換為可執行的 JavaScript,接著執行

cd MyTest

npx react-native start

在另一個終端窗口運行應用:

pnpm dlx react-native run-android

結果如下

https://ithelp.ithome.com.tw/upload/images/20240919/20108931u5OwACvPmK.png

結論

今天嘗試了使用React Native Cli進行開發,由於Expo已經有許多教程了,所以之後會主要以React Native Cli進行嘗試並摸索。


上一篇
【從零開始學React Native】3.React Native環境架設(Expo)
下一篇
【從零開始學React Native】5. 創建Todo Tracker——規劃
系列文
從零開始學React Native20
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言