1. 程式人生 > >React Native在window下的環境搭建(一)

React Native在window下的環境搭建(一)

React Native官方開發文件

 

以下是本人抄錄的:

初次接觸React Native感覺和React很像,卻是有點類似,但不完全是,React Native有自己的元件物件,不過它也自定義的元件也是使用ES6中的語法定義。

首先是安裝的依賴,必須安裝:Node、React Native命令列工具、Python2 以及JDK和Android Studio。

開發的編輯可以根據自己喜好來,本人使用的時WebStorm,和Android Studio有點像。

1、Node、React Native命令列工具是開發是需要管理包用到。
2、Python2 安裝暫時不知道幹什麼用,但開發文件中提到,那就安裝吧。
3、Android Studio是在編譯Android應用所需的工具和環境。

Node, Python2, JDK

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

注意 Node 的版本必須高於 8.3,Python 的版本必須為 2.x(不支援 3.x),而 JDK 的版本必須是 1.8(目前不支援 1.9 及更高版本)。安裝完 Node 後建議設定 npm 映象以加速後面的過程(或使用科學上網工具)。

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

//設定 npm 映象以加速後面的過程(或使用科學上網工具)
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 某第三方庫名

 

JDK環境變數配置

1、新建->變數名”JAVA_HOME”,變數值”C:\Program Files\Java\jdk1.8.0_151”(即JDK的安裝路徑)
2、編輯->變數名”Path”,在原變數值的最後面加上“;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin”
3、新建->變數名“CLASSPATH”,變數值“.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar” 

       

配置這三個有什麼作用呢? 
JAVA_HOME: 
為了方便引用,比如,你JDK安裝在C:\Program Files\Java\jdk1.6.0目錄裡,則設定JAVA_HOME為該目錄路徑, 那麼以後你要使用這個路徑的時候, 只需輸入%JAVA_HOME%即可, 避免每次引用都輸入很長的路徑串;
2)歸一原則, 當你JDK路徑被迫改變的時候, 你僅需更改JAVA_HOME的變數值即可, 否則,你就要更改任何用絕對路徑引用JDK目錄的文件, 要是萬一你沒有改全, 某個程式找不到JDK, 後果是可想而知的—-系統崩潰!
3)第三方軟體會引用約定好的JAVA_HOME變數, 不然, 你將不能正常使用該軟體, 以後用JAVA久了就會知道, 要是某個軟體不能正常使用, 不妨想想是不是這個問題。 CLASSPATH: (要加.;表示當前路徑) 作用:這是一個很有趣,當然也比較折磨初學者的問題, 這個變數設定的目的是為了程式能找到相應的”.class”檔案, 不妨舉個例子: 你編譯一個JAVA程式—A.java, 會得到一個A.class的類檔案,你在當前目錄下執行java A,
將會得到相應的結果(前提是你已經設定CLASSPATH為”.”). 現在, 你把A.class移到別的目錄下(例如:”e:\”), 執行java A, 將會有NoClassDefFindError的異常,原因就是找不到.class檔案,
現在你把CLASSPATH增加為:”.;e:\”再執行java A, 看看會有什麼結果),一切正常, java命令通過CLASSPATH找到了.class檔案
! Path: 道理很簡單, 你想在任何時候都使用%JAVA_HOME%\bin\java 等來執行java命令嗎, 當然不會, 於是, 你可以選擇把 %JAVA_HOME%\bin新增到PATH路徑下, 這樣, 我們在任何路徑下就可以僅用java來執行命令了.
(當你在命令提示符視窗輸入你個程式碼時,作業系統會在當前目錄和PATH變數目錄裡查詢相應的應用程式, 並且執行.)

 檢驗是否配置成功 執行cmd 輸入 java -version (java 和 -version 之間有空格) 
若如圖所示 顯示版本資訊 則說明安裝和配置成功。 

Android 開發環境

安裝Android開發環境很麻煩,而且感覺摸不到頭腦,不過慢慢摸索會清楚的。

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

1. 安裝 Android Studio

首先下載和安裝 Android Studio,如果大不開,請自行搜尋下載連結。安裝介面中選擇"Custom"選項,確保選中了以下幾項:

1、Android SDK
2、Android SDK Platform
3、Performance (Intel ® HAXM)
4、Android Virtual Device

然後點選"Next"來安裝選中的元件。如果選擇框是灰的,你也可以先跳過,稍後再來安裝這些元件。

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

2. 安裝 Android SDK

Android Studio 預設會安裝最新版本的 Android SDK。目前編譯 React Native 應用需要的是Android 8.1 (Oreo)版本的 SDK。你可以在 Android Studio 的 SDK Manager 中選擇安裝各版本的 SDK。

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

或者使用Ctrl+Alt+S,或者在工具欄中開啟SDK Manager設定介面

可以根據需要來,安裝對應版本的SDK

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

  • Android SDK Platform 27
  • Intel x86 Atom_64 System Image(官方模擬器映象檔案,使用非官方模擬器不需要安裝此元件)

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

上面安裝SDK的過程可能很慢,我弄了一個下午才弄好。

3. 配置 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。

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