rn 環境搭建


https://reactnative.cn/docs/next/getting-started.html

搭建開發環境

歡迎使用 React Native!這篇文檔會幫助你搭建基本的 React Native 開發環境。如果你已經搭好了環境,那么可以嘗試一下編寫 Hello World

  • 完整原生環境
  •  
  • 簡易沙盒環境

Follow these instructions if you need to build native code in your project. For example, if you are integrating React Native into an existing application, or if you "ejected" from Create React Native App, you'll need this section.

根據你所使用的操作系統、針對的目標平台不同,具體步驟有所不同。如果想同時開發 iOS 和 Android 也沒問題,你只需要先選一個平台開始,另一個平台的環境搭建只是稍有不同。

如果閱讀完本文檔后還碰到很多環境搭建的問題,我們建議你還可以再看看由本站提供的環境搭建視頻教程(macOS iOSmacOS Androidwindows Android)、windows 環境搭建文字教程、以及常見問題。注意!視頻教程或者其他網絡上的博客和文章可能和本文檔有所出入,請以最新版本的本文檔所述為准!

開發平台:  macOS  Windows  Linux 目標平台:  iOS  Android

安裝依賴

必須安裝的依賴有:Node、React Native 命令行工具、Python2 以及 JDK 和 Android Studio。

雖然你可以使用任何編輯器來開發應用(編寫 js 代碼),但你仍然必須安裝 Android Studio 來獲得編譯 Android 應用所需的工具和環境。

 

注意:不要使用 cnpm!cnpm 安裝的模塊路徑比較奇怪,packager 不能正常識別!

npm config set registry https://registry.npm.taobao.org --global npm config set disturl https://npm.taobao.org/dist --global 

Yarn、React Native 的命令行工具(react-native-cli)

Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模塊的下載。React Native 的命令行工具用於執行創建、初始化、更新項目、運行打包服務(packager)等任務。

npm install -g yarn react-native-cli 

安裝完 yarn 后同理也要設置鏡像源:

yarn config set registry https://registry.npm.taobao.org --global yarn config set disturl https://npm.taobao.org/dist --global 

安裝完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方庫名代替npm install 某第三方庫名

Android 開發環境

如果你之前沒有接觸過 Android 的開發環境,那么請做好心理准備,這一過程相當繁瑣。請萬分仔細地閱讀下面的說明,嚴格對照文檔進行配置操作。

譯注:請注意!!!國內用戶必須必須必須有穩定的翻牆工具,否則在下載、安裝、配置過程中會不斷遭遇鏈接超時或斷開,無法進行開發工作。某些翻牆工具可能只提供瀏覽器的代理功能,或只針對特定網站代理等等,請自行研究配置或更換其他軟件。總之如果報錯中出現有網址,那么 99% 就是無法正常翻牆。

1. 安裝 Android Studio

首先下載和安裝 Android Studio,國內用戶可能無法打開官方鏈接,請自行使用搜索引擎搜索可用的下載鏈接。安裝界面中選擇"Custom"選項,確保選中了以下幾項:

  • Android SDK
  • Android SDK Platform
  • Performance (Intel ® HAXM) (AMD 處理器看這里)
  • Android Virtual Device

然后點擊"Next"來安裝選中的組件。

如果選擇框是灰的,你也可以先跳過,稍后再來安裝這些組件。

安裝完成后,看到歡迎界面時,就可以進行下面的操作了。

2. 安裝 Android SDK

Android Studio 默認會安裝最新版本的 Android SDK。目前編譯 React Native 應用需要的是Android 9 (Pie)版本的 SDK(注意 SDK 版本不等於終端系統版本,RN 目前支持 android4.1 以上設備)。你可以在 Android Studio 的 SDK Manager 中選擇安裝各版本的 SDK。

你可以在 Android Studio 的歡迎界面中找到 SDK Manager。點擊"Configure",然后就能看到"SDK Manager"。

Android Studio Welcome

SDK Manager 還可以在 Android Studio 的"Preferences"菜單中找到。具體路徑是Appearance & Behavior → System Settings → Android SDK。

在 SDK Manager 中選擇"SDK Platforms"選項卡,然后在右下角勾選"Show Package Details"。展開Android 9 (Pie)選項,確保勾選了下面這些組件(重申你必須使用穩定的翻牆工具,否則可能都看不到這個界面):

  • Android SDK Platform 28
  • Intel x86 Atom_64 System Image(官方模擬器鏡像文件,使用非官方模擬器不需要安裝此組件)

然后點擊"SDK Tools"選項卡,同樣勾中右下角的"Show Package Details"。展開"Android SDK Build-Tools"選項,確保選中了 React Native 所必須的28.0.3版本。你可以同時安裝多個其他版本。

最后點擊"Apply"來下載和安裝這些組件。

3. 配置 ANDROID_HOME 環境變量

React Native 需要通過環境變量來了解你的 Android SDK 裝在什么路徑,從而正常進行編譯。

打開控制面板 -> 系統和安全 -> 系統 -> 高級系統設置 -> 高級 -> 環境變量 -> 新建,創建一個名為ANDROID_HOME的環境變量(系統或用戶變量均可),指向你的 Android SDK 所在的目錄(具體的路徑可能和下圖不一致,請自行確認):

ANDROID_HOME Environment Variable

SDK 默認是安裝在下面的目錄:

c:\Users\你的用戶名\AppData\Local\Android\Sdk

你可以在 Android Studio 的"Preferences"菜單中查看 SDK 的真實路徑,具體是Appearance & Behavior → System Settings → Android SDK。

你需要關閉現有的命令符提示窗口然后重新打開,這樣新的環境變量才能生效。

4. 把 platform-tools 目錄添加到環境變量 Path 中

打開控制面板 -> 系統和安全 -> 系統 -> 高級系統設置 -> 高級 -> 環境變量,選中Path變量,然后點擊編輯。點擊新建然后把 platform-tools 目錄路徑添加進去。

此目錄的默認路徑為:

c:\Users\你的用戶名\AppData\Local\Android\Sdk\platform-tools

創建新項目

使用 React Native 命令行工具來創建一個名為"AwesomeProject"的新項目:

react-native init AwesomeProject 

提示:你可以使用--version參數(注意是個杠)創建指定版本的項目。例如react-native init MyApp --version 0.44.3。注意版本號必須精確到兩個小數點。

Windows 用戶請注意,請不要在某些權限敏感的目錄例如 System32 目錄中 init 項目!會有各種權限限制導致不能運行!

如果你是想把 React Native 集成到現有的原生項目中,則步驟完全不同,請參考集成到現有原生應用

准備 Android 設備

你需要准備一台 Android 設備來運行 React Native Android 應用。這里所指的設備既可以是真機,也可以是模擬器。后面我們所有的文檔除非特別說明,並不區分真機或者模擬器。Android 官方提供了名為 Android Virtual Device(簡稱 AVD)的模擬器。此外還有很多第三方提供的模擬器如Genymotion、BlueStack 等。一般來說官方模擬器免費、功能完整,但性能較差。第三方模擬器性能較好,但可能需要付費,或帶有廣告。

使用 Android 真機

你也可以使用 Android 真機來代替模擬器進行開發,只需用 usb 數據線連接到電腦,然后遵照在設備上運行這篇文檔的說明操作即可。

使用 Android 模擬器

你可以使用 Android Studio 打開項目下的"android"目錄,然后可以使用"AVD Manager"來查看可用的虛擬設備,它的圖標看起來像下面這樣:

Android Studio AVD Manager

如果你剛剛才安裝 Android Studio,那么可能需要先創建一個虛擬設備。點擊"Create Virtual Device...",然后選擇所需的設備類型並點擊"Next",然后選擇Pie API Level 28 image.

譯注:請不要輕易點擊 Android Studio 中可能彈出的建議更新項目中某依賴項的建議,否則可能導致無法運行。

如果你還沒有安裝 HAXM(Intel 虛擬硬件加速驅動),則先點擊"Install HAXM"或是按這篇文檔說明來進行安裝。

然后點擊"Next"和"Finish"來完成虛擬設備的創建。現在你應該可以點擊虛擬設備旁的綠色三角按鈕來啟動它了,啟動完后我們可以嘗試運行應用。

編譯並運行 React Native 應用

確保你先運行了模擬器或者連接了真機,然后在你的項目目錄中運行react-native run-android

cd AwesomeProject
react-native run-android 

如果配置沒有問題,你應該可以看到應用自動安裝到設備上並開始運行。注意第一次運行時需要下載大量編譯依賴,耗時可能數十分鍾。此過程嚴重依賴穩定的翻牆工具,否則將頻繁遭遇鏈接超時和斷開,導致無法運行。

如果你的設備的 Android 版本低於 5.0,則可能在運行時看到紅屏,請閱讀在設備上運行這篇文檔來按照步驟解決。

AwesomeProject on Android

react-native run-android只是運行應用的方式之一。你也可以在 Android Studio 或是Nuclide中直接運行應用。

譯注:建議在run-android成功后再嘗試使用 Android Studio 啟動。請不要輕易點擊 Android Studio 中可能彈出的建議更新項目中某依賴項的建議,否則可能導致無法運行。

如果你無法正常運行,遇到奇奇怪怪的紅屏錯誤,先回頭仔細對照文檔檢查,然后可以看看論壇的求助專區。不同時期不同版本可能會碰到不同的問題,我們會在論壇中及時解答更新。但請注意千萬不要執行 bundle 命令,那樣會導致代碼完全無法刷新。

修改項目

現在你已經成功運行了項目,我們可以開始嘗試動手改一改了:

  • 使用你喜歡的文本編輯器打開App.js並隨便改上幾行
  • 按兩下 R 鍵,或是在開發者菜單中選擇 Reload JS,就可以看到你的最新修改。

完成了!

恭喜!你已經成功運行並修改了你的第一個 React Native 應用。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM