前言
年后新的項目需要用到混合開發(fā)，這里一邊學(xué)習(xí)一邊記錄學(xué)習(xí)的過程，主要使用目前最新的RN版本，借鑒React Native中文網(wǎng)來熟悉它的完整過程。
搭建開發(fā)環(huán)境(目標平臺Android 開發(fā)平臺WindowS)
（一）安裝Chocolatey
Chocolatey ['t??kl?ti,'t??kl?ti] 是一個Windows上統(tǒng)一包管理軟件，使你可以在命令行下安裝軟件，便于開發(fā)者按需快速安裝應(yīng)用程序和工具，不用去各個網(wǎng)站找工具，不過國內(nèi)訪問和下載速度相對慢一點。
-
一般通過如下命令的方式安裝
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
安裝過程中需要注意以下兩點
1，需要通過管理員權(quán)限啟動CMD命令行
2，配置Chocolatey的安裝目錄，默認是安裝在C:\ProgramData\chocolatey，我們需要在環(huán)境變量里配置其安裝路徑，然后再執(zhí)行其安裝命令。
-
執(zhí)行我們的安裝命令：
安裝過程如下：
最后在我們設(shè)置的F:\chocolatey目錄下可以看到它的安裝內(nèi)容。
（二）安裝Python2
安裝之前說一下，我們的工具都是通過Chocolatey的操作命令來安裝，Chocolatey詳細的操作命令可以到Chocolatey官網(wǎng)的Commands命令標簽下去找，里面有所有的操作符和實例。
- 打開命令提示符窗口，使用Chocolatey來安裝Python 2 ['pa?θɑn]
choco install python2
- 程序默認是安裝在C盤下面的，如果想配置自定義路徑，Chocolatey官網(wǎng)覆蓋默認安裝目錄和Chocolatey的Python2包版本安裝介紹里可以找到相關(guān)方法，這里使用一個混合的方法安裝。
choco install python2 -y -o -ia "'/qn /norestart ALLUSERS=1 TARGETDIR=F:\Python2'"
- 安裝成功后如下
- 同時也可以到Python2官網(wǎng)，自己去下載最新版本，然后安裝到自己想要的目錄，Chocolatey命令方式是從Chocolatey的軟件倉庫里去下載，下載的內(nèi)容是一樣，只是方式不同而已。
（三）安裝NodeJS
- 打開命令提示符窗口，使用Chocolatey來安裝NodeJS，也可以到Node.JS官網(wǎng)去下載，沒選擇安裝版本時默認是安裝最新版本。安裝成功后通過node -v命令查看版本。
choco install nodejs.install
nodejs自定義目錄的安裝方法，用官網(wǎng)方法都失敗，也沒找到解決辦法，目前就裝在默認C盤里了。
安裝完node后設(shè)置npm鏡像以加速后面的過程。
npm在nodejs安裝目錄C:\Program Files\nodejs\node_modules\npm下可以看到，
這里我們需要在環(huán)境變量里配置npm
1，配置環(huán)境變量，這里只需要配置NodeJS的路徑就行，npm的路徑不需要再加入，都加入后續(xù)操作會報錯。
2，通過將%NODE_PATH%加入path中完成配置過程。
3，在命令窗口中執(zhí)行以下命令，完成鏡像設(shè)置。
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的命令行工具用于執(zhí)行創(chuàng)建、初始化、更新項目、運行打包服務(wù)（packager）等任務(wù)。
- 1，命令行安裝yarn
npm install -g yarn react-native-cli
安裝成功后，根據(jù)安裝過程中的提示，找到默認的安裝目錄，把其配入環(huán)境變量，如下將C:\Users\PVer\AppData\Roaming\npm加入環(huán)境變量path目錄下即可。
- 2，安裝完yarn后同理也要設(shè)置鏡像源，在輸入命令之前，同樣需要把yarn配入環(huán)境變量，同上，我們在安裝yarn時會有顯示默認的安裝目錄，我們找到其bin目錄加入到path即可。
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
我們在配置好yarn的環(huán)境變量后執(zhí)行命令如下：
- 3，安裝完yarn之后就可以用yarn代替npm了，例如用yarn代替npm install命令，用yarn add 某第三方庫名代替npm install --save 某第三方庫名。
（五）安裝Android Studio
AS的安裝這里就省略，這是每個安卓開發(fā)人員必備的，下面來說說需要注意的幾個地方。
-
React Native目前需要Android Studio2.0或更高版本。
-
Android Studio需要Java Development Kit [JDK] 1.8（暫不支持更高版本）。
-
Android studio的Settings->Android SDK中設(shè)置SDK-Platforms和SDK-Tools
1，配置SDK-Platforms，選擇Show Package Details，勾選Android 6.0下的如下6項。
2，在SDK Tools窗口中，選擇Show Package Details，然后在Android SDK Build Tools中勾選Android SDK Build-Tools 23.0.1（必須包含有這個版本。當(dāng)然如果其他插件需要其他版本，你可以同時安裝其他多個版本）。然后還要勾選最底部的Android Support Repository.
-
配置ANDROID_HOME環(huán)境變量，SDK的安裝目錄
-
將Android SDK的Tools目錄添加到PATH變量中
（六）安裝Git
- 你可以使用Chocolatey來安裝git，git的話是安卓開發(fā)基本必備的，這里安裝就不多提了。
choco install git
- 也可到Git官方去下載。
（七）創(chuàng)建一個新的RN項目
原有項目嵌入RN模塊，我會在學(xué)習(xí)完RN之后加進來，這里就只討論創(chuàng)建一個新的RN項目。
1，在我的G盤里創(chuàng)建一個目錄G:\reactnative-workspace，當(dāng)作我RN所有項目的工作區(qū)間。
2，打開命令提示符窗口，進去該目錄，執(zhí)行如下命令，創(chuàng)建一個RN項目，項目名為ReactNativeNewProject。
react-native init ReactNativeNewProject
- 3，進入創(chuàng)建成功的ReactNative項目里，看看它的目錄結(jié)構(gòu)如下：
4，電腦連上手機，打開USB調(diào)試，執(zhí)行adb devices確定連接成功
5，執(zhí)行以下命令，先進入我們的項目目錄，然后啟動項目
cd ReactNativeNewProject 進入項目目錄
react-native run-android 啟動這個項目
啟動命令如下：
在啟動命令執(zhí)行的過程中會自動啟動node.js的服務(wù)，當(dāng)?shù)讓訖z測我們的node.js服務(wù)未啟動時會自動啟動，我們也可以在啟動我們項目命令(步驟5)之前通過下面的命令手動開啟服務(wù)。
react-native start
啟動成功后顯示ready
- 6，啟動項目成功后，手機會出現(xiàn)如下界面。在啟動項目時，失敗過一次，顯示安裝到手機上失敗，我的解決辦法是刪除項目，重新執(zhí)行2，3，4，5步驟，安裝成功。
總結(jié)：
按照上面的步驟成功的把RN的環(huán)境搭建成功，可能在其中的步驟中會出現(xiàn)問題，百度一下應(yīng)該都好解決，今天也是第一天認真的接觸RN，后續(xù)學(xué)習(xí)也會對文章進行修改和補充。
