React Native - 環境設定

---

---

要設定 React Native 的環境，您需要安裝一些東西。我們將使用 OSX 作為我們的構建平臺。

步驟 1：安裝 create-react-native-app

在您的系統中成功安裝 NodeJS 和 NPM 後，您可以繼續安裝 create-react-native-app（如下所示全域性安裝）。

C:\Users\Tutorialspoint> npm install -g create-react-native-app

步驟 2：建立專案

瀏覽所需資料夾並建立一個新的 React Native 專案，如下所示。

C:\Users\Tutorialspoint>cd Desktop
C:\Users\Tutorialspoint\Desktop>create-react-native-app MyReactNative

執行上述命令後，將建立一個具有指定名稱的資料夾，其中包含以下內容。

步驟 3：NodeJS Python Jdk8

確保您的系統中已安裝 Python NodeJS 和 jdk8，如果沒有，請安裝它們。此外，建議安裝最新版本的 yarn 以避免某些問題。

步驟 4：安裝 React Native CLI

您可以使用 npm 上的 install -g react-native-cli 命令安裝 React Native 命令列介面，如下所示。

npm install -g react-native-cli

步驟 5：啟動 React Native

要驗證安裝，請瀏覽專案資料夾並嘗試使用 start 命令啟動專案。

C:\Users\Tutorialspoint\Desktop>cd MyReactNative
C:\Users\Tutorialspoint\Desktop\MyReactNative>npm start

如果一切順利，您將獲得如下所示的二維碼。

如指示，在您的 Android 裝置上執行 React Native 應用的一種方法是使用 Expo。在您的 Android 裝置上安裝 Expo 客戶端並掃描上面獲得的二維碼。

步驟 6：彈出專案

如果您想使用 Android Studio 執行 Android 模擬器，請按 ctrl+c 退出當前命令列。

然後，執行執行 彈出命令 如下

npm run eject

這會提示您彈出選項，使用箭頭選擇第一個選項並按 Enter。

然後，您應該建議在主螢幕上顯示應用名稱以及 Android Studio 和 Xcode 專案的專案名稱。

儘管您的專案已成功彈出，但您可能會收到以下錯誤：-

忽略此錯誤並使用以下命令為 Android 執行 React Native：-

react-native run-android

但是，在此之前，您需要安裝 Android Studio。

步驟 7：安裝 Android Studio

訪問網頁 https://developer.android.com/studio/ 並下載 Android Studio。

下載其安裝檔案後，雙擊它並繼續安裝。

步驟 8：配置 AVD 管理器

要配置 AVD 管理器，請單擊選單欄中的相應圖示。

步驟 9：配置 AVD 管理器

選擇裝置定義，建議使用 Nexus 5X。

單擊“下一步”按鈕，您將看到一個“系統映像”視窗。選擇“x86 映像”選項卡。

然後，選擇棉花糖並單擊下一步。

最後，單擊“完成”按鈕以完成 AVD 配置。

配置虛擬裝置後，單擊“操作”列下的播放按鈕以啟動您的 Android 模擬器。

步驟 10：執行 Android

開啟命令提示符，瀏覽您的專案資料夾，然後執行 react-native run-android 命令。

然後，您的應用執行將在另一個提示符中開始，您可以在其中檢視其狀態。

在您的 Android 模擬器中，您可以看到預設應用的執行情況，如下所示：-

步驟 11：local.properties

在您的專案資料夾 SampleReactNative/android（在本例中）中開啟 android 資料夾。建立一個名為 local.properties 的檔案並在其中新增以下路徑。

sdk.dir = /C:\\Users\\Tutorialspoint\\AppData\\Local\\Android\\Sdk

在此處，將 Tutorialspoint 替換為您的使用者名稱。

步驟 12：熱過載

要構建應用程式，請修改 App.js，更改將自動更新到 Android 模擬器上。

如果沒有，請單擊 Android 模擬器，按 ctrl+m，然後選擇 啟用熱過載 選項。