2. 程式人生 > >Windows下搭載React Native開發環境

Windows下搭載React Native開發環境

阿新 • • 發佈：2019-01-31
備註：結合網路上多篇文章和自己遇到的環境整理而成。一、安裝Node.js    兩種形式
        1、通過Windows包管理工具chocolatey來安裝（需要安裝chocolatey客戶端和powershell V3+方式）--比較繁瑣

Chocolatey

Chocolatey是一個Windows上的包管理器，類似於linux上的yum和 apt-get。 你可以在其官方網站上檢視具體的使用說明。一般的安裝步驟應該是下面這樣：

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))"
 
 && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
一般來說，使用Chocolatey來安裝軟體的時候，需要以管理員的身份來執行命令提示符視窗。         2、直接下載Node.js安裝包進行安裝包--簡單
    安裝node的同時，會安裝npm，這樣可以下載第三方包和上傳自己元件
    安裝完成後，cmd輸入：node -v  檢視node版本，輸入：npm -v 檢視npm的版本
二、安裝React Native命令列工具cmd中輸入：
npm install -g react-native-cli

設定映象源：

npm config set
 
 registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
釋出自己的包時候需要修改回官方地址  手動修改檔案配置，npm安裝目錄檔案：nodejs\node_modules\npm\npmrc如下圖所示：三、AndroidStudio安裝(androidstudio_2.3.3.0)
說明：AndroidStudio只是IDE開發工具，SDK和AVD是開發包和執行環境安裝後，更換Android SDK Location（預設在c盤，新增環境時，很容易爆掉c盤）

  • 在啟動頁底部，選擇configure--Project Default--project structure--設定sdk location位置

  • 確定所有安裝都勾選了，尤其是Android SDK和Android Device Emulator。

  • 在初步安裝完成後，選擇Custom安裝項：

  • 在SDK Platforms視窗中，選擇Show Package Details，然後在Android 6.0 (Marshmallow)中勾選
  • ARM EABI v7a System Image
  • Google APIs、
  • Intel x86 Atom System Image、
  • Intel x86 Atom_64 System Image
  • Google APIs Intel x86 Atom_64 System Image。

  • 在SDK Tools視窗中，選擇Show Package Details，然後在Android SDK Build Tools中勾選Android SDK Build-Tools 23.0.1。

ANDROID_HOME環境變數

確保ANDROID_HOME環境變數正確地指向了你安裝的Android SDK的路徑。

開啟控制面板 -> 系統和安全 -> 系統 -> 高階系統設定 -> 高階 -> 環境變數 -> 系統變數--新建

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

推薦安裝的工具

Gradle Daemon

開啟Gradle Daemon可以極大地提升java程式碼的增量編譯速度。

(if not exist "%USERPROFILE%/.gradle" mkdir "%USERPROFILE%/.gradle") && (echo org.gradle.daemon=true >> "%USERPROFILE%/.gradle/gradle.properties")

將Android SDK的Tools目錄新增到PATH變數中

你可以把Android SDK的tools和platform-tools目錄新增到PATH變數中，以便在終端中執行一些Android工具，例如android avd或是adb logcat等。

開啟控制面板 -> 系統和安全 -> 系統 -> 高階系統設定 -> 高階 -> 環境變數（系統變數） -> 選中PATH -> 雙擊進行編輯

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator   （如果通過命令啟動emulator報錯，需要把tools改為emulator）

可選的安裝項

Git

你可以使用Chocolatey來安裝git:

choco install git

另外你也可以直接去下載Git for Windows。 在安裝過程中注意勾選"Run Git from Windows Command Prompt"，這樣才會把git命令新增到PATH環境變數中。

Genymotion

比起Android Studio自帶的原裝模擬器，Genymotion是一個性能更好的選擇，但它只對個人使用者免費。

  1. 下載和安裝Genymotion（譯註：不要被裡面的價格唬住了，個人免費的連結可能不明顯，請仔細尋找！另外，genymotion需要依賴VirtualBox虛擬機器，下載選項中提供了包含VirtualBox和不包含的選項，請按需選擇）。
  2. 開啟Genymotion。如果你還沒有安裝VirtualBox，則此時會提示你安裝。
  3. 建立一個新模擬器並啟動。
  4. 啟動React Native應用後，可以按下F1來開啟開發者選單。

Visual Studio Emulator for Android

Visual Studio Emulator for Android)是利用了Hyper-V技術進行硬體加速的免費android模擬器。也是Android Studio自帶的原裝模擬器之外的一個很好的選擇。而且你並不需要安裝Visual Studio。

在用於React Native開發前，需要先在登錄檔中進行一些修改：

  1. 開啟執行命令（按下Windows+R鍵）
  2. 輸入regedit.exe然後回車
  3. 在登錄檔編輯器中找到HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Android SDK Tools條目
  4. 右鍵點選Android SDK Tools，選擇新建 > 字串值
  5. 名稱設為Path
  6. 雙擊Path，將其值設為你的Android SDK的路徑。（例如C:\Program Files\Android\sdk）

四、測試安裝
建立專案名稱為projectname的專案cmd命令列執行環境（如果想要專案初始化到指定的目錄，通過切換目錄更改到專案資料夾）
react-native init projectname
cd projectname
react-native run-android

五、手動執行Packager

有個常見的問題是在你執行react-native run-android命令後，Packger可能不會自動執行。此時你可以手動啟動它：

cd projectname
react-native start

六、問題及解決

1、執行react-native run-android報錯：No connected devices！開啟安裝好的模擬器，並啟動裝置啟動一個模擬器命令：2、安裝模擬器：Genymotion，點選add沒有裝置的問題：一般登入之後就會有device顯示，如果登入不進去，從以下三個地方檢查1、使用Oracle VM VirtualBox管理器建立一個虛擬電腦(不用再裡面裝系統，相關資訊配置好就行)，並開啟啟動，參考：3、開啟Settings-->Network-->選擇Use HTTP Proxy，填寫代理服務網路（先開啟科學上網）4、更新電腦顯示卡主要從上面四個方面檢查，以上都做了，如果還是不行，檢查在Genymotion中註冊的賬戶是否已啟用，另外多登陸幾次，看到下面的黑色一直再滾動，說明就可以了 

3、Genymotion啟動device後顯示白屏：

很可能是顯示卡驅動有問題，用驅動人生或者驅動精靈更新顯示卡驅動就可以了： 4、執行react-native run-android報錯：Timeout getting device list 解決方法：將安裝好的sdk路徑新增到這 

5. gradle project refresh failed錯誤解決

手動同步gradle：Tools->Android->Sync Project with Gradle File

6、android 修改AVD的存放位置

1、從Android下載的軟體後。由於Eclipse預設的虛擬機器儲存目錄為C盤。會影響系統。。建立未建立虛擬機器之前就配置好相應的資料。以免儲存在你係統盤的容量：

（1）然後在系統環境變數裡設定一個ANDROID_SDK_HOME，將“D:\Android\AVDs”複製到該變數下。

（2）找開Eclipse新建虛擬機器，看是否有引用。。

以下為已建立有虛擬機器的情況（轉載。）。。

2、學習過android的都知道，android 虛擬機器的儲存目錄預設的是C:\Documents and Settings\使用者名稱\.android。如想自己更改AVD的位置只需要做如下三步操作即可。

（1）到AVD的預設資料夾下將“.android”剪下到你想放的碟片，比如“D:\Android\AVDs”目錄下。

（2）然後在系統環境變數裡設定一個ANDROID_SDK_HOME，將“D:\Android\AVDs”複製到該變數下。

（3）修改D:\Android\AVDs\.android\avd目錄下的配置檔案中的path專案。

例如“Android2.2.ini”修改其中的path

path=D:\Android\AVDs\.android\avd\Android2.2.avd

即可。

  注意，在修改時，要使eclipse和AVD關閉。

然後啟動eclipse 進入android virtual devices manager 可以看到路徑已經變化了。


7、如果執行react-native run-android 後出現錯誤
先在工作目錄建立：android/app/src/main 目錄下建立一個  assets空資料夾
如果react-native是新版本，目錄下有index.js和App.js那麼在命令列程式碼執行以下命令
[javascript] view plain copy
  1. react-native bundle --platform android --dev false --entry-file index.js --bundle-output   
  2. android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
再執行react-native run-android命令即可
----------

如果react-native是之前版本，目錄下有index.android.js,那麼在命令列程式碼執行以下命令

[javascript]view plaincopy
  1. <strong></strong>  
[javascript]view plaincopy
  1. react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output   
  2. android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/  
-------------------------
另外嘗試訪問：http://localhost:8081/index.android.bundle?platform=android
是否正常，如果不正常，有可能8081埠被佔用（尤其是安裝有McAfee的使用者）結束後，重新啟動react-native run-android ，重新訪問：看是否正常訪問。PC：快捷ctr+M 可以在avd虛擬機器中快速調出reload介面

相關推薦

Windows下搭載React Native開發環境

備註：結合網路上多篇文章和自己遇到的環境整理而成。一、安裝Node.js    兩種形式        1、通過Windows包管理工具chocolatey來安裝（需要安裝chocolatey客戶端和powershell V3+方式）--比較繁瑣ChocolateyChoco

2018.10月，搭建windows下的React Native開發環境

我是根據react native中文網教程https://reactnative.cn/docs/getting-started.html進行搭建 react native必須安裝的依賴有：Node、React Native 命令列工具、Python2 以及 JDK 和 Android St

Windows下搭建react-native開發環境

最近公司沒有什麼事情,所以決定研究一下react-native.react-native是Facebook研發的一種用於移動端研發hybrid app 的技術(研究的不深,目前只知道這個作用),那麼對於react-native的環境搭建卻是有些複雜.那麼對於剛剛完成環境搭建的

Windows 系統下搭建React-Native 開發環境

元旦放假三天，拿出一天研究了下React-Native的開發： react-native , 優缺點就不介紹了先, 以Windows 10 版本 開發Android 版本為例 1. 安裝python

【React Native系列教程】Windows平臺搭建React Native開發環境

尊重版權,未經授權不得轉載 本文出自:賈鵬輝的技術部落格(http://blog.csdn.net/fengyuzhengfan/article/details/72454037) 告訴大家一個好訊息，為大家精心準備的React Native視訊教程釋出了，大家

Windows上搭建React-Native開發環境

技術是進步的，如果你還在為糾結學習Android還是IOS，那麼你已經OUT了，這是網友說的。React-Native怎麼樣我還不知道，只知道要學習這個東西。今天給大家說一說，如何在Windows上搭建React-Native的開發環境。 第一步：如果你是An

Mac下搭建react native開發環境

安裝必需軟體 Homebrew Homebrew, Mac系統的包管理器，用於安裝NodeJS和一些其他必需的工具軟體。 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew

在window下搭建react-native開發環境配置，並通過react-native-cli生成一個專案執行

安裝些基本軟體，自行找教程，記得配置下環境變數 安裝python2 安裝jdk node、yarn 模擬器Genymotion傳送門 安裝android studio 然後看著教程將SDK裝好傳

在windows下搭建React Native Android開發環境

ps1 doc cmd pro oot col exec 包管理工具 ocs 1.登錄 React Native 中文網http://reactnative.cn/docs/0.45/getting-started.html 2.登錄 Chocolatey 下載包管理工具h

windows下配置React-Native（Android）開發環境總結

首先配置環境我們需要用到以下工具： node.js react-native-cli Android Studio JDK（1.8以上） SDK python 1.安裝node.js和react-native-cli命令列工具

在Windows下搭建React Native Android開發環境和第一個專案建立執行

總結rn必須的依賴安裝 必須準備的安裝依賴有：Node、React Native 命令列工具、Python2 以及 JDK 和 Android Studio。 雖然你可以使用任何編輯器來開發應用（編寫 js 程式碼），但你仍然必須安裝 Android Stud

詳細講解如何在windows下搭建react-native的開發環境(包括在裝置上安裝和執行react-native app )!

  我之前在增加完變數後,react-native命令不起作用了,後來重新安裝react-native解決了此問題. 開啟安裝好的android stdio，然後start一個專案，下一步下一步,然後找到這個按鈕，這個是啟動模擬器的鍵，如果沒有安裝模擬器的話，可以選一個手機型號來下載,找到對應你的電腦的

一步一步在Windows下搭建React Native Android開發環境

搭建JAVA開發環境根據作業系統分為x86或x64位的，下載jdk1.8以上的版本，本機安裝時的java版本：jdk-8u45-windows-x64.exe配置JAVA的環境變數JAVA_HOME = C:\Program Files\Java\jdk1.8.0_45 CL

Android之Windows下搭建React Native Android開發環境（差不多搞了一天）

Android之Windows下搭建React Native Android開發環境               窮逼買不起mac,但是他們都說React Native Android只能在mac下面執行，然後到網上各種找資料看能不能在Windows下面搭建開發環境，找了幾

Windows下React-Native開發環境配置

     1、一開始是在npm安裝時出現“‘node’”不是內部命令。。。是nodejs沒有安裝成功，雖然安裝過程會自動寫入環境變數，但是還是要在path後加入nodejs的安裝路徑，我的是"C:/Develope/nodejs"     接著在命令視窗輸入 node 

在Windows下搭建React Native Android開發環境(加入下載連結)

1.安裝JDK 從Java官網下載JDK並安裝。請注意選擇x86還是x64版本。 推薦將JDK的bin目錄加入系統PATH環境變數。 - 官網連結：http://www.oracle.com/technetwork/java/javase/dow

Windows搭建React Native開發環境

win 9.png 技術 src alt blog nat -1 bsp 成功部署 Windows搭建React Native開發環境

react-native 開發環境搭建

post 註意 令行 圖片 技術 usb bubuko http androi 首先安裝jdk。本教程基於jdk1.8，安裝時有一點要特別註意：jdk和jre必須裝到不同目錄下，否則初始化react-native項目時大概率報tools.jar not found ex

react-native-開發環境搭建

Go roi ids ati ios studio androi 工具 sta 一、開發環境搭建-windows平臺； 安裝 node 安裝 react native npm install -g react-native-cli 安裝Android開發工具Androi

Windows下配置Objective-C開發環境

hello rtc linker ces objc 安裝 指定 lighting 如果 一、IDE的安裝（Code::Blocks） 我們選用Code::Blocks作為IDE，它的安裝包可以從網上各處下載下來，對版本無特別要求。筆者使用的是16.10的版本（鏈接: htt