react native 配置的錯誤解決

標籤：

1.假如你成功了success介面

按照官方的教程把RN-android 環境搭建好後，就可以把demo跑起來了；

本地實際的訪問地址可以參考： http://localhost:8081/index.android.bundle?platform=android

2.可能第一次都會失敗1.出現一個紅色的介面，failed JS bundle

解決方案:

有時候你運行 react-native run-android，發現並不能自動運行 dev server，你可以在當前項目目錄中運行如下命令來手動啟動 server：

    $ react-native start

本地server指定的8081連接埠並沒有成功接送資料

adb reverse tcp:8081 tcp:8081

可以在chrome瀏覽器中訪問：http://localhost:8081/

在JS-SERVER上看到資料包過來

如果是5.0以下的系統 會爆出closed ， 建議使用wifi方式進行調試

    $ adb reverse tcp:8081 tcp:8081    error: closed  

點擊手機的物理menu鍵, 或者搖動手機才會出現Dev settings菜單（這項操作需要在你已經開啟的ReactNavtive應用介面操作才有效）

Dev Settings -> Debug server host for device，

填入自己pc電腦上的 IP 位址，需要在同一網段，例如手機和pc都串連到了tplink-wifi-sid上。

之後menu-reload js 即可。

如果手機和電腦不在同一個網段，或者手機不能訪問到，就會出現 Unable to download js bundle的紅屏介面

2.可能出現白色的介面

 解決方案:

像MIUI等系統，預設會把那個顯示懸浮窗開關給屏蔽關掉【使用者可以手動切換】，操作後，重新load即可

更常見的搭建問題可以參考下這個：http://www.race604.com/react-native-for-android-start/

3.invariant Violation:Application 紅色螢幕錯誤

解決方案:

1.首先可以參考 OverStack 和一個官方的issue:

http://stackoverflow.com/questions/29287987/invariant-violation-application-awesomeproject-has-not-been-registered-when-b

https://github.com/facebook/react-native/issues/500#issuecomment-111575780

2.根據具體錯誤資訊去排查，最後發現我出現這個錯誤的原因是不小心在檔案頭部打多了個無效字元，導致無法正確解析下面的程式碼。所以只需要把那個無用的代碼【影響了文法編譯環節】刪掉，重新reload -js 即可

4.載入UIExplorerBlock失敗

這是一個官方bug,預設的node_modules裡面並沒有該組件對應

https://github.com/facebook/react-devtools/issues/128

ios之前有這個問題，Android的初期版本貌似也有該類似問題

5. .babelrc.stage檔案錯誤

transforming [========================================] 100% 399/400Error while persisting cache: TransformError: /Users/alexwan/Documents/Project/HelloWorld/node_modules/react-deep-force-update/lib/index.js: [BABEL] /Users/alexwan/Documents/Project/HelloWorld/node_modules/react-deep-force-update/lib/index.js: Unknown option:/Users/alexwan/Documents/Project/HelloWorld/node_modules/react-deep-force-update/.babelrc.stage

專案檔夾中node_modules/react-deep-force-update/.babelrc.stage 這個檔案也會引起紅屏，刪除之後就可以運行通過了。

react native 配置的錯誤解決