react-native學習----------Android的Windows搭建

序言

           開始研究react-native來弄安卓和IOS ^_^~~~.歡迎騷擾:[email protected]

           參考資料地址:https://reactnative.cn/docs/getting-started.html

 

環境搭建

Copy官網的一句話~需要選擇正確的版本來運行.

我們建議直接使用搜索引擎搜索下載 Node 、Python2 和Java SE Development Kit (JDK)

注意 Node 的版本必須大於等於 10，Python 的版本必須爲 2.x（不支持 3.x），而 JDK 的版本必須是 1.8（目前不支持 1.9 及更高版本）。安裝完 Node 後建議設置 npm 鏡像（淘寶源）以加速後面的過程（或使用科學上網工具）。

 

Node安裝

首先下載該安裝包 ,地址爲:http://nodejs.cn/download/(下載的文件是node-v12.13.0-x64.msi這個是最新的不能用,需要下載node-v12.8.0-x64.msi替代 此處一定要注意),下載完成後,就高歌猛進.

安裝完成後在CMD中運行如下命令. 將源切換成淘寶源

# 使用nrm工具切換淘寶源
npx nrm use taobao

# 如果之後需要切換回官方源可使用 
npx nrm use npm

出現如下的圖示,就表示切換源成功了

 

Python--2.7.17安裝

首先下載該安裝包,地址爲:https://www.python.org/downloads/release/python-2717/.然後選擇箭頭的路徑下載,然後高歌猛進

 

JDK 安裝

就不說了~~~~~~需要知道的可以騷擾:[email protected]

 

Yarn、React Native 的命令行工具（react-native-cli）

直接在CMD中運行下面命令.

關於如何使用:安裝完 yarn 之後就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方庫名代替npm install 某第三方庫名。

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

npm install -g yarn react-native-cli

 

Android 開發環境

copy 官網的一句話~~~第一我看到是崩潰的,但是國內已經有社區了~~所以不必擔心

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

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

安裝 Android Studio

下面的是COPY官網,我是從這裏下載的:http://www.android-studio.org/(android-studio-ide-183.5522156-windows.exe) 下載的安裝過程和如下官網的什麼勾選有出入,但是沒關係,先一路高歌猛進.

然後全都安裝成功後你會看到 Custom選項的指引了

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

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

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

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

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

 

安裝 Android SDK(這個我先選擇最新的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 SDK: Android 9.+(Q) 如下圖所示

這個就是項目啓動後天幻SKD的路徑~~~
SDK Manager 還可以在 Android Studio 的"Preferences"菜單中找到。
具體路徑是Appearance & Behavior → System Settings → Android SDK。

然後繼續安裝一些東西~~~怎麼這麼東西要安裝.這裏因爲我現在的的是最新的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"來下載和安裝這些組件。)

 

 配置 ANDROID_HOME 環境變量

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

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

 

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

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

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

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

 

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

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

此目錄的默認路徑爲：

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

 

 

創建新項目

 

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

react-native init cuiyaonan2000Project

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

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

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

創建完成後,在IDE中選擇已存在的項目,就可以進入該項目了.如圖

 

 

準備 Android 設備

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

使用 Android 真機

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

使用 Android 模擬器(肯定用這個了)

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

如果你剛剛纔安裝 Android Studio，那麼可能需要先創建一個虛擬設備。點擊"Create Virtual Device..."，然後選擇所需的設備類型並點擊"Next"，然後選擇Pie API Level 28 image.(這裏也很重要一定注意這個28,選錯了就不行了,這裏很容易選錯)

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

如果你還沒有安裝 HAXM（Intel 虛擬硬件加速驅動），則先點擊"Install HAXM"或是按這篇文檔說明來進行安裝。(這個上面已經安裝了不需要重新安裝)

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

 

 

編譯並運行 React Native 應用

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

cd cuiyaonan2000Project
react-native run-android

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

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

 

react-native run-android只是運行應用的方式之一。你也可以在 Android Studio 中直接運行應用。(如下的一定要注意,首次運行可能要十分鐘下載)

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

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

 

 

修改項目

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

• 使用你喜歡的文本編輯器打開App.js並隨便改上幾行
• 按兩下 R 鍵，或是在開發者菜單中選擇 Reload JS，就可以看到你的最新修改。(這個就是指在app的應用上點擊兩下R鍵,這個Reload JS的點擊地方如下圖所示)

 

 

一些坑(解決如下問題就可以啓動了)

1. 關於啓動首先肯定是可以用 react-native run-android 來啓動的,這個命令會包含命令 react-native命令.該命令就是啓動服務~~~~
2. 其次就是啓動的anchroid的模擬器默認是沒有啓動 開發者模式的.所以必須開啓開發者模式否則你就繞圈吧(選擇設置,然後不停點擊版本號.直到彈出框的數字變成0.如果你不會可以騷擾[email protected])
3. 另外可以訪問2個地址以確定項目是否啓動成功A:http://localhost:8081/index.bundle?platform=android  B:http://localhost:8081/debugger-ui/