因為專案需要，今天開始正式學習React Native，先來搭建個開發環境

忐忑的心情

因為專案比較急，而且客戶要求使用React Native開發，只能先學點基礎然後在專案中使用的時候，邊做邊學了，在保證工期的前提下，進擊的程式猿, go,go,go!!

環境

開始，相關概念

1、PowerShell

PowerShell是微軟公司為 Windows 環境所開發的殼程式及指令碼語言技術，採用的是命令列介面。

—>百科介紹<—

2、包管理工具

包管理工具，可以讓我們用幾個簡單的命令去安裝，升級，還有刪除軟體，並且它會自動給我們解決軟體之間的依賴的問題。
Windows 使用者可以使用 Chocolatey 這個包管理工具，Mac 使用者可以使用 Homebrew

安裝 Chocolatey

安裝 Chocolatey，只需要在 Windows 系統的命令列工具下面去執行一行命令，這個命令列工具可以是 命令提示符（cmd），也可以是 Powershell ，只需要在其中的一個上面安裝 Chocolatey 就可以了。你要用管理員的身份去執行命令列工具，不然會遇到許可權問題。

以管理員身份開啟命令列工具

Windows 7：點選 開始 選單，在搜尋框裡輸入 cmd 或者 powershell ，找到以後，用滑鼠右鍵點選它們，選擇 以管理員身份執行。

Windows 8 + ：使用快捷鍵 win + Q ，搜尋 cmd 或者 powershell ，然後右鍵點選它們，在視窗下面，選擇 以管理員身份執行。

在 命令提示符 上安裝 Chocolatey

@powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

在 Powershell 上安裝 Chocolatey

iex ((new-object net.webclient).DownloadString
 
('https://chocolatey.org/install.ps1'))

提示：如果是在 Powershell 下面安裝 Chocolatey 之前，先修改一下 Powershell 的執行策略，不然會出現 “此係統中禁止執行指令碼” 這樣的錯誤，解決的方法是執行下面的命令，意思就是把執行的策略設定成不限制：

Set-ExecutionPolicy unrestricted

測試

在命令列工具的下面，輸入：

choco -help

如果出現一些有用的幫助資訊，比如 Chocolatey 的版本號，安裝到的目錄，相關的命令，還有示例等等，這就說明我們已經可以在系統上使用 Chocolatey 了。

…

3、安裝Python 2

開啟命令提示符視窗，使用Chocolatey來安裝Python 2。輸入命令

choco install python2

安裝過程

安裝成功

4、安裝Node

開啟命令提示符視窗，使用Chocolatey來安裝NodeJS

choco install nodejs.install

安裝成功

安裝完node後建議設定npm映象以加速後面的過程（或使用科學上網工具）。注意：不要使用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 –save 某第三方庫名。

5、安裝android studio

安裝AS,其實之前開發的時候肯定是安裝過的，這裡就不說了，包括環境變數的設定等等，如果作為一個android程式設計師，自己的開發環境都不會配置的話，你真的——可以百度嘛。
需要提一下的是有可能之前做原生開發的時候，並沒有安裝或下載RN開發需要的一些工具或庫，這個可以看RN中文網看看需要什麼，然後在AS中去安裝即可，我這邊的有:

SDK Platforms

Google APIs Intel x86 Atom System Image

Google APIs Intel x86 Atom_64 System Image

在SDK Manager中去勾選上下載即可

6、開啟Gradle Daemon

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

官方文件中的開啟的介紹方法是在window的命令列中輸入如下命令

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

這個命令的含義就是，在使用者目錄下，找到.gradel檔案，沒有就建立一個，在這個資料夾下建立一個檔案gradle.properties，在這個檔案中新增內容org.gradle.daemon=true

7、關於模擬器的選擇

我之前有一般都是使用真機除錯的，不過有時候也會想用模擬器(如果模擬器的啟動速度和記憶體佔用情況較好的情況下），Genymotion是我之前用過的， 而且效果不錯，所以我就繼續Genymotion了，至於它的安裝使用，這裡就不寫了，可以參考這篇文章或者自行百度。

8、來測試一波RN的專案

在window命令列中，進入你的工作目錄，然後輸入如下命令

1建立專案

react-native init RNTest

注意專案RNTest的建立路徑，我可不想把專案建在C盤

2執行packager

react-native start

3**保持packager開啟，另外開啟一個命令列視窗**，然後進入工程目錄，執行專案

cd RNTest
react-native run-android

如果apk安裝執行出現報錯，請檢查上文中安裝SDK的環節裡所有依賴是否都已裝全，platform-tools是否已經設到了PATH環境變數中，執行adb devices能否看到裝置。

如果安裝成功，應該能看到APP紅屏報錯，這是正常的，我們還需要讓app能夠正確訪問pc端的packager服務。

搖晃裝置或按Menu鍵（Bluestacks模擬器按鍵盤上的選單鍵，通常在右Ctrl的左邊 或者左Windows鍵旁邊），可以開啟除錯選單，點選Dev Settings，選Debug server host for device，輸入你的正在執行packager的那臺電腦的區域網IP加:8081（同時要保證手機和電腦在同一網段，且沒有防火牆阻攔），再按back鍵返回，再按Menu鍵，在除錯選單中選擇Reload JS，就應該可以看到執行的結果了。

如果真實裝置白屏但沒有彈出任何報錯，可以在安全中心裡看看是不是應用的“懸浮窗”的許可權被禁止了。

我將電腦的防火牆關閉之後，內容就顯示出來了

9、安裝時異常處理

在安裝過程中，我自己的電腦上是很順利的，但是在公司的電腦上就出現了問題(可能是公司電腦軟體比較老的原因)，在安裝的python2的過程中提示

[00:01:54] Failures
[00:01:54]  - python2 (exited 1603) - Error while running 'C:\ProgramData\chocolatey\lib\python3\tools\chocolateyInstall.ps1'.
[00:01:54]  See log for details.

其實這是你的電腦已經安裝了python2 了，所以安裝失敗了，檢驗自己的電腦是不是安裝了python2，只需要在命令列輸入python即可，如果安裝了就會python的命令列，沒有就表示還沒有安裝，通過彈出python命令列我們可以看出python的安裝路徑，比如：

ok，學習筆記一之搭建開發環境就完成了，後面就可以開始寫“Hello World”了！！