之前一篇寫了《邏輯性最強的React Native環(huán)境搭建與調(diào)試》說了RN的安裝，今天在這里做一個復(fù)盤，讓我們能夠更直觀更深入的了解React Native（以下簡稱RN）,這一篇重點來說的就是，安裝之后必報的2個錯誤的解決方案。

更新日期：2017.9.2 運行環(huán)境：Windows 10/Android環(huán)境

?

一、回顧一下RN的安裝過程：

1.搭建Android開發(fā)環(huán)境，因為要運行在Android環(huán)境下，所有安卓的開發(fā)環(huán)境是要搭建的。具體的步驟請搜索度娘！（配置JDK、安裝SDK Manager組件等）；

2.ReactNative（下文簡稱RN）因為是基于nodejs框架的，所以需要安裝nodejs開發(fā)環(huán)境，包括：nodejs運行庫6.x+、npm3+、python2.x；

3.需要初始化RN項目所以需要安裝Git版本控制器；

4.以上步驟執(zhí)行完成之后，就可以創(chuàng)建RN項目了，創(chuàng)建并運行項目需要以下幾個步驟：

??? a).創(chuàng)建項目，執(zhí)行命令：react-native init xxx(項目名稱)；

??? b).在模擬器或手機安裝app：進入項目根目錄執(zhí)行命令：react-native run-android；執(zhí)行完此命令之后，如果是第一次運行，命令會幫你在手機或者模擬器創(chuàng)建一個app的“殼子”以后運行都是基于這個app的，手機上只要有這個app之后，在啟動調(diào)試就不需要react-native run-android來運行安裝項目了，因為“殼子”的安裝只需要一次，以后只需要啟動服務(wù)即可，RN調(diào)試app的時候是基于服務(wù)接口的，所以如果app已經(jīng)安裝在android調(diào)試設(shè)備上之后，每次重啟電腦只需要輸入命令：“react-native start”啟動服務(wù)即可進行修改和調(diào)試。

?

二、處理第一次創(chuàng)建App之后一定要報的2個錯：

錯誤一：unable to load script from assets index.android.bundle on windows.

翻譯中文：無法在加載文件index.android.bundle

產(chǎn)生原因：ad項目在編譯運行的時候，在win10上沒有創(chuàng)建編譯目錄導(dǎo)致的。

解決方案：

1.在工程目錄沖創(chuàng)建assets文件 android/app/src/main/assets2.根目錄下運行命令 react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res3.重新安裝app react-native run-android

?

錯誤二：Could not connect to development server.

如圖：

翻譯中文：沒有找到開發(fā)服務(wù)；

產(chǎn)生原因：安裝的app沒有設(shè)置服務(wù)器和端口號。

解決方案：

1.搖一搖，或者其他途經(jīng)，彈窗RN設(shè)置浮層，如果用的是Visual Studio Emulator for Android上呼出設(shè)置浮層快捷鍵是：先按“ESC”再按“ALT”，設(shè)置浮層如圖：

2.點擊Dev Settings設(shè)置服務(wù)器ip和端口，如圖：

默認的服務(wù)器端口是8081，使用http://localhost:8081/index.android.bundle?platform=android可以訪問，即服務(wù)正常啟動，啟動的命令窗體不要關(guān)閉，關(guān)閉之后服務(wù)終止。

小技巧：使用快捷鍵可以很方便的調(diào)試刷新頁面，如果使用的是Visual Studio Emulator for Android，連按兩下“R”鍵，即刷新。

也可以在RN開發(fā)浮層上設(shè)置啟動 Hot Reloading，每次文件修改都會自動刷新，大大節(jié)約了調(diào)試的時間！

解決了以上2個問題，第一次運行RN App的問題就已經(jīng)全部解決了，祝使用愉快！

?

?

?

總結(jié)

以上是生活随笔為你收集整理的ReactNative环境搭建扩展篇——安装后报错解决方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。