跳到主要內容

不使用框架開始使用

平台支援
Android
iOS
macOS
TV
watchOS
Web
Windows
visionOS

如果您的限制無法透過框架良好地解決，或者您偏好撰寫自己的框架，您可以不使用框架來建立 React Native 應用程式。

若要這麼做，您首先需要設定您的環境。完成設定後，請繼續執行以下步驟來建立應用程式並開始開發。

步驟 1：建立新的應用程式​

如果您先前已安裝全域 react-native-cli 套件，請移除它，因為它可能會導致意料之外的問題

shell
npm uninstall -g react-native-cli @react-native-community/cli

您可以使用 React Native Community CLI 來產生新的專案。讓我們建立一個名為「AwesomeProject」的新 React Native 專案

shell
npx @react-native-community/cli@latest init AwesomeProject

如果您要將 React Native 整合到現有的應用程式中，或者您已在專案中安裝 Expo，或者您要將 Android 支援新增至現有的 React Native 專案（請參閱與現有應用程式整合），則這不是必要的。您也可以使用第三方 CLI 來設定您的 React Native 應用程式，例如 Ignite CLI。

資訊

如果您在 iOS 方面遇到問題，請嘗試執行以下命令重新安裝相依性

  1. cd ios 以導覽至 ios 資料夾。
  2. bundle install 以安裝 Bundler
  3. bundle exec pod install 以安裝由 CocoaPods 管理的 iOS 相依性。

[選用] 使用特定版本或範本​

如果您想使用特定 React Native 版本開始新專案，您可以使用 --version 引數

shell
npx @react-native-community/cli@X.XX.X init AwesomeProject --version X.XX.X

您也可以使用自訂 React Native 範本開始專案，並使用 --template 引數，請在此處閱讀更多資訊：這裡。

步驟 2：啟動 Metro​

Metro 是 React Native 的 JavaScript 建置工具。若要啟動 Metro 開發伺服器，請從您的專案資料夾執行以下命令

shell
npm start
注意

如果您熟悉網頁開發，Metro 類似於 Vite 和 webpack 等捆綁器，但它是為 React Native 從頭到尾設計的。例如，Metro 使用 Babel 將 JSX 等語法轉換為可執行的 JavaScript。

步驟 3：啟動您的應用程式​

讓 Metro Bundler 在其自己的終端機中執行。在您的 React Native 專案資料夾中開啟新的終端機。執行以下命令

shell
npm run android

如果一切設定正確，您應該很快就會在您的 Android 模擬器中看到您的新應用程式正在執行。

這是執行您的應用程式的一種方式 - 您也可以直接從 Android Studio 內執行它。

如果您無法使其運作，請參閱疑難排解頁面。

步驟 4：修改您的應用程式​

現在您已成功執行應用程式，讓我們修改它。

  • 在您選擇的文字編輯器中開啟 App.tsx 並編輯一些程式碼行。
  • 按 R 鍵兩次或從開發人員選單 (Ctrl + M) 中選取 Reload 以查看您的變更！

就是這樣！​

恭喜！您已成功執行並修改您的第一個基本 React Native 應用程式。

接下來呢？​

  • 如果您想將這個新的 React Native 程式碼新增到現有的應用程式中，請查看整合指南。
  • 如果您有興趣深入了解 React Native，請查看React Native 簡介。