React Native for Android 入門老虎

jopen 9年前發布 | 198K 次閱讀 Android開發 移動開發 React Native for Android

原文  http://www.race604.com/react-native-for-android-start/

 

昨天期待已久的 React Native for Android 發布了，趕緊來嘗試一下，我跟著這個 Getting Started 開開始入門。發現被一些 “老虎” 堵在門口， Hello World 都跑不起來，入不了 React Native 的門，讓我很懊惱，最后終于解決。可能大家也會遇到類似的問題，這篇文章希望能幫到你。

安裝環境

根據官方的入門文檔，需要安裝 Homebrew, nvm, Node.js 4.0, watchman, flow。

首先 Homebrew 大家應該都安裝好了，這里就不說了。接下來實用 brew 安裝 nvm： 

$ brew install nvm
</div>

然后會提示你把 nvm 加入環境變量中，例如，我就在 .bashrc 或者 .zshrc 中加入如下兩行： 

export NVM_DIR=~/.nvm source $(brew --prefix nvm)/nvm.sh
</div>

然后使用nvm安裝最新的 Node.js 4.0（Node.js 怎么突然到了 4.0 了，之前版本都是 0.xx？還是很驚訝的）。 

$ nvm install node && nvm alias default node
</div>

我在這里遇到了第一只 “老虎”。這個命令執行不下去，我來打開 NodeJS 官網 ，發現竟然打不開，原來是 Node.js 的訪問有問題。如果也有同學和我一樣，可以 點擊這里 下載這個安裝包直接安裝也可以。

另外多說一句：nvm 確實是一個好東西，可以在你的機器上裝幾個版本的 Node.js，然后根據需要切換版本。例如裝完 4.0 以后，發現 Hexo 掛掉了，可以方便的實用 nvm 切換到 0.12。

后面的安裝沒有啥問題，按照官方文檔來就可以： 

$ brew install watchman $ brew install flow
</div>

最后，最好執行一下如下命令，更新相關軟件： 

$ brew update && brew upgrade
</div>

開始 Hello World

環境安裝好了，迫不及待的來 Hello world。運行如下幾條命令，直接可以生成一個樣例項目： 

$ npm install -g react-native-cli 
$ react-native init AwesomeProject 
 $ cd AwesomeProject/

接下來就是激動人心的時候，插上手機，開始運行： 

$ react-native run-android
</div>

這里會使用 Gradle 進行編輯。編譯過程中有可能會出現 Android sdk 找不到，Build tools 版本找不到的錯誤。這是因為 RN for Android 需要環境變量ANDROID_HOME： 

export ANDROID_HOME=/usr/local/opt/android-sdk
</div>

并且需要 Build-tools version 23.0.1，API 23 等，安裝好就可以正常編譯了。

正常情況下會自動安裝安裝 APK 包并運行，與此同時會打開一個終端運行 dev server。但是，我期待的 Hello World 頁面并沒有出現，只是出現了一個空白的 Activity。發生了什么？我一步一步檢查我的配置過程，是不是我漏掉了什么，并沒有發現我做錯什么。

我發現運行運行 dev server 的終端中打出了一些錯誤信息：

</div> </div>

dyld: Library not loaded: /usr/local/lib/libpcre.1.dylib
  Referenced from: /usr/local/bin/watchman
  Reason: image not found


dyld: Library not loaded: /usr/local/lib/libpcre.1.dylib
  Referenced from: /usr/local/bin/watchman
  Reason: image not found


Watchman:  watchman--no-pretty get-sockname returned with exit code null dyld: Library not loaded: /usr/local/lib/libpcre.1.dylib
  Referenced from: /usr/local/bin/watchman
  Reason: image not found


ERROR  watchman--no-pretty get-sockname returned with exit code null dyld: Library not loaded: /usr/local/lib/libpcre.1.dylib
  Referenced from: /usr/local/bin/watchman
  Reason: image not found


Error: watchman--no-pretty get-sockname returned with exit code null dyld: Library not loaded: /usr/local/lib/libpcre.1.dylib
  Referenced from: /usr/local/bin/watchman
  Reason: image not found



at ChildProcess.<anonymous> (/Users/Jing/Projects/ReactNative/AwesomeProject/node_modules/react-native/node_modules/sane/node_modules/fb-watchman/index.js:194:18)
at emitTwo (events.js:87:13)
at ChildProcess.emit (events.js:172:7)
at maybeClose (internal/child_process.js:817:16)
at Socket.<anonymous> (internal/child_process.js:319:11)
at emitOne (events.js:77:13)
at Socket.emit (events.js:169:7)
at Pipe._onclose (net.js:469:12)</pre><br />



經過一番搜索，發現是pcre找不到，通過如下命令即可修復： 




$ brew uninstall pcre && brew install pcre 

</div>


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




$ react-native start 

</div>


再次啟動，發現還是空白的頁面，終端中也沒有任何的錯誤提示，按 menu 鍵、搖手機也沒有出現官網中所說的開發者菜單。 


是不是我手機的問題？我決定使用模擬器試一下，果然，終于出現能夠正常顯示了內容了。也知道正常的 React Native App 開發運行時怎么樣的了：首先會出現一個 Loading JS 的窗口，并且在 dev server 端也會打出客戶端下載 JS Bundle 的 log。 


我再用手機試一下，發現 APP 直接顯示一個空白的頁面，dev server 終端也沒有打印任何 log。難道是 dev server 沒有連接上 server 端？看一下 Logcat 的 log，有如下錯誤： 


E/unknown:React: Unable to download JS bundle
E/unknown:React: java.net.ConnectException: failed to connect to localhost/127.0.0.1 (port 8081) after 5000ms: isConnected failed: ECONNREFUSED (Connection refused)
E/unknown:React:     at libcore.io.IoBridge.isConnected(IoBridge.java:223)
E/unknown:React:     at libcore.io.IoBridge.connectErrno(IoBridge.java:161)
E/unknown:React:     at libcore.io.IoBridge.connect(IoBridge.java:112)
...
E/unknown:React:  Caused by: libcore.io.ErrnoException: isConnected failed: ECONNREFUSED (Connection refused)
E/unknown:React:     at libcore.io.IoBridge.isConnected(IoBridge.java:208)
E/unknown:React:     at libcore.io.IoBridge.connectErrno(IoBridge.java:161) 
E/unknown:React:     at libcore.io.IoBridge.connect(IoBridge.java:112) 
E/unknown:React:     at java.net.PlainSocketImpl.connect(PlainSocketImpl.java:192) 
E/unknown:React:     at java.net.PlainSocketImpl.connect(PlainSocketImpl.java:460) 
E/unknown:React:     at java.net.Socket.connect(Socket.java:833) 
...



發現，果然是 Server 訪問錯誤。參考 官方文檔 。對于 Android 5.0 及以上的設備，直接運行： 




$ adb reverse tcp:8081 tcp:8081 

</div>


我找來一個 Android 5.0 的機器，果然可以了。對于 5.0 以下的機器，上面的命令會出錯： 




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

</div>


我的主力開發機器是 Android 4.4 的。按照官方文檔，需要按 menu 鍵或者搖晃手機，在開發菜單中設置一下 dev server 的 IP 地址。前面我就試過了，我怎么操作都不能打開這個菜單。突然想到，是不是系統屏蔽了？我去找系統權限設置，發現如下： 


 React Native for Android 入門老虎 


果然，系統默認禁用掉了 APP 的 顯示懸浮窗 的權限。因為那個菜單是實用懸浮窗來顯示的，所以一直看不到。開啟這個權限，然后就可以正常喚起菜單了。然后菜單中選擇Dev Settings->Debug server host for device，填入你開發電腦的 IP 地址。如果手機和電腦不在同一個網段，或者手機不能訪問到，就會出現如下頁面： 


 React Native for Android 入門老虎 


之前顯示空白頁面，其實應該是彈出這個錯誤頁面的，因為這個頁面也是一個懸浮窗，默認也被禁止了。 


到現在，終于真相大白了，可以對 React Native “Say Hello” 了。為了運行一個 Hello World 花費了我不少時間，接下來就可以開始 React Native 之旅了。 


總結一下 


    

  1. 確保相關工具和 Android SDK 都是最新的； 
    2. 

  2. 因為 React Native for Android 提示錯誤和開發菜單都是通過 懸浮窗 顯示的，要注意的 ROM 有沒有自作聰明的幫你默認禁用掉了 顯示懸浮窗 的權限； 
    3. 

  3. RN 需要啟動一個 Dev server 來輔助開發，Android 5.0 可以直接通過 USB 的訪問，5.0 以下只能通過 WiFi 來訪問。為了便于開發，還是建議實用 5.0 的機器 
    4. 

                    

                    

                        
 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

                        
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

                        
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

                        
                        
                    


                

                

                    

                        
相關經驗

                        
                    

                    

                        
相關資訊

                        
                    

                    

                        
相關文檔