React Native環境配置之Windows版本搭建

標籤：環境配置   window   gradle   異常   成功   問題   ref   結果   nod   

接近年底了，回想這一年都做了啥，學習了啥，然後突然發現，這一年買了不少書，看是看了，就沒有完整看完的。悲催。
然後，最近項目也不是很緊了，所以抽空學習了H5。自學啃書還是很無趣的，雖然Head First Html5 Programming（中文版）這本書講的很有意思，但是學習了大半本就想自己動手練練，所以得找個架構玩玩。
另外之前也就聽說過React Native很火，火了半個地球了，而且它號稱“Learn once，write anywhere”這句話在移動開發猿眼裡意味著什麼呢，我不說你估計也知道：“跨平台”。像我這種安卓猿寫出來的代碼能跑在IOS上，相信沒有比這更開心的了。
而且，我在學習H5，那學習H5 Web開發怎麼和我的安卓開發共存呢，React Native直接解決了我的問題：在運用H5開發的同時，還可以有效調用android原生態開發，直接兩者兼具，既保留了android原生開發也運用了H5 web開發，perfect。所以架構也先不找了，直接毫不猶豫地投入到了React Native的學習當中。然後接下來的配置就讓我陷入了苦逼的憤懣中，所以在配置好之後立馬的記錄下來，一是記錄自己的學習經過，二是，給遇到同樣麻煩的同學提供一些借鑒。

因為我是在WIN10上搭建的，所以以此為版。

• 1、安裝JDK

這個做java、android開發的都已經安裝好了，沒安裝的可以自行安裝，這裡提示注意的地方：一定一定要在系統變數中配置JAVA_HOME: D:\guanmanman\Jdk8\jdk8，值是你的JDK安裝目錄，，請記得。

• 2、安裝SDK

因為我是搞android開發的，所以這裡是安裝SDK，這裡需要：
① 環境變數ANDROID_HOME：XXX
例 如：（ANDROID_HOME: D:\guanmanman\androidStudio\sdk）
② 環境變數PATH例如：
例如：（PATH：%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools）

• 3、下載SDK

React Native使用的是android版本是23.0.1，只支援這一個sdk版本，所以你必須先下載他的源碼及工具，不然後面後報錯，我就遇到了

如果你要是用的google 模擬器還要下載

ok 上面的基礎東西下載好安裝完，我們接下來就正式開始我們的React Native所需要工具下載和安裝了：

1：node.js的下載和安裝

：https://nodejs.org/en/，本人用的版本是， V6.9.2

安裝則是選擇好目錄傻瓜式的安裝即可。

2：Git的下載和安裝

：https://git-for-windows.github.io/ 直接download即可

安裝注意選擇支援windows Command 和 windows ‘ default console window

ok 安裝完上面兩個工具我們就能使用npm命令了，可以看下：

3：配置國內鏡像

因為需要下載東西而遭到國內禁止，你懂得，所以得配置鏡像，方便我們下載：

npm config set registry https://registry.npm.taobao.orgnpm
npm config set disturl https://npm.taobao.org/dist

命令列執行這兩段配置命令。

4：下載 react-native-cli

這是react-native命令執行所必須不可缺少的檔案。

執行命令：npm install -g react-native-cli

這個根據網路快慢，下載時間有所不同。

完成react-native-cli的下載，到這裡我們就完成了所有的基礎配置了，也就是說前期工作已做完了，下面就可以建立項目進行開發了，是不是很開心，有點迫不及待呢，走著看吧，偷笑。

建立項目工程：

1：建立一個FirstRNProject工程

開始之前先建立一個專門用於儲存React-Native工程項目的工作區：React-native_workSpace

然後執行命令：react-native init FirstRNProject 斷行符號，init 代表建立一個工程。

當現實這個介面的時候就代表我們的項目已建立完成，可以到你的工作區間去查看。

2：開啟FirstRNProject工程

工程項目已建立完畢，然後我們進入這個工程中，並執行輸入react-native start，開啟這個工程

3：檢查FirstRNProject項目是否啟動成功

在瀏覽器中訪問http://localhost:8081/index.android.bundle?platform=android

當顯示如上的指令碼就代表已成功開啟。

4：運行FirstRNProject項目

進入項目目錄，輸入react-native run-android 斷行符號，

執行命令後會去下載相關的資源，這個過程還是蠻長的，耐心等待吧。

然後下載完後就會安裝工程在手機上了，你是否覺得已完成了呢，我要告訴你想多了，來看看我們碰到了那些坑吧。

遇坑則填：

1：sdk工具包

從標出來的地方可以看出，需要SDK工具版本是23.0.1，這個簡單，開啟androidstudio SDK Manager 進行下載吧，這也是在基礎配置時我強調的一定要下載這個版本的原因。

下載完在繼續運行項目 react-native run-android

2：JAVA_HOME的配置

出現這個問題是因為我的環境變數path中直接用的是jdk的安裝目錄並沒有配置JAVA_HOME，這裡直接添加一個JAVA_HOME的配置，在填入jdk的安裝目錄即可。

3 ：Unable to upload some APKs異常

這個問題是在5.0以上的真機中會出現 Unable to upload some APKs的問題，這時候我們只需要把項目工程中的android目錄中的build.gradle檔案中的

dependencies {        classpath ‘com.android.tools.build:gradle:1.3.1‘    }

classpath 中的1.3.1給為1.2.3即可，還要設定android/gradle/wrapper/gradle-wrapper.properties檔案的jar包

把distributionUrl=https\://services.gradle.org/distributions/gradle-2.4-all.zip改為

distributionUrl=https\://services.gradle.org/distributions/gradle-2.2-all.zip

ok 改完再次執行項目：react-native run-android，它會重新下載zip包，又是N等。

在煎熬的等待中，終於下完了，進入真機或是模擬器中查看。

4 ：can‘t find variable:異常

這個需要你配置下真機IP和連接埠號碼，上下多次搖晃手機，會出現一個功能表列，點擊Dev Settings後，點擊Debug server host & port for device,設定IP和連接埠，連接埠號碼固定為8081,IP為你的主機ip地址。

ok，返回，再次上下搖晃手機，在功能表列中，選擇Reload JS，是不是感覺OK了呢，你想多了。

5：SyntaxError異常

本以為到這裡就ok了，結果，運行一看，好吧，真不捨得我：

Strict mode does not allow function declarations in a lexically nested statement.

這個異常卡了我兩天，如果你也遇到這個異常了，你就懂了我的無奈，因為這不是人為或是配置出了問題，你要是知道了答案肯定十分的震驚，那是因為：這個異常是 React Native 版本內建的Bug，兩天的鬱悶到最後解決了還是一樣的無語。

這這裡感謝React Native7群 （115487854）裡的 晴朗 大神，他一言就解決了我兩天的困惑。
“ react-native init 項目名 --version 0.38.0， 這是0.39的自身的問題，換0.38解決。 ”他這樣說道。

針對這個異常，下面提供兩種解決方案：

方法一：在建立項目時，使用命令react-native init 項目名 --version 0.38.0

方法二：開啟工程中node_modules\react-native\Libraries\Core\InitializeCore.js檔案找到 112 行，更改function handleError(e, isFatal) 為 var handleError = function(e, isFatal)然後在工程中執行 npm start --reset-cache重新啟動

然後，就沒有然後了。

以上就是最後，這個問題解決之後就正式的進入RN介面了。

OK，到這裡就講完了，我估計我所遇到的坑是比較多的了，希望你能少於點坑，尤其是新人剛學習，信心遭受10000點暴擊。

接下來就要正式的學習RN技術了，很期待，在學習中我也會時不時把自己的學習成果與大家分享，有興趣的同學一起努力吧。

更多資訊請關注平台，有部落格更新會及時通知。愛學習愛技術。

React Native環境配置之Windows版本搭建