React Native Android 初次試用遇到的各種坑

oopq4512 9年前發布 | 111K 次閱讀 Android ReactNative 移動開發

React Native 的趨勢

React Native 是近來最熱門的技術熱點之一，RN的推廣勢必帶來一種新的開發思路，但目前來看RN并沒有預想的發展那樣快，還存在很多問題等待解決，作為Android開發人員了解一下RN還是很有必要的

文檔

RN開發教程和文檔還是很完善的，我是一般直接查看官方文檔。
RN官方文檔

這里寫圖片描述

關于部署環境的步驟就不多做解釋了，按照文檔一步步的走下來，就完全ok。

RN初次使用的各種坑

RN坑比較多是一大特點，作為Android開發人員，如果你已經可以預感到RN Android 比RN IOS 坑要多，說明你已經達標了。

DevSettingsActivity

由于權限問題，RN的彈窗（設置屬性和開發模式的彈窗）需要顯示在其他應用之上的權限，所以進入到RN項目時，RN檢測到沒有這個權限的時候，會直接跳轉到DevSettingsActivity，DevSettingsActivity是RN內置的一個native 的頁面。

這里寫圖片描述

當你期待著一睹RN風采的時候，看到這樣的一個頁面想必是一臉懵逼，其實這個頁面只是需要你授權而已，找到我們的RN項目，點擊之后看到下面的這個頁面。

這里寫圖片描述

打開授權，返回，按理說你就要看到RN頁面了。

Could not get BatchedBridge, make sure your bundle is packaged correctly

沒想到的是，設置完授權后，返回看到了這樣一個頁面，血紅的背景，熟悉的堆棧結構，還是驚艷到了。

這里寫圖片描述

這個問題搜遍一搜，就可以搜到很多解決方式，咱們這里也不是隨便貼一段命令行就結束了，主要還是想深入的了解一下這個錯誤是什么問題。

先說說解決辦法，在終端中，進入到項目的根目錄，執行下面這段命令行：

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/res/

第一次執行這段命令行可能會出現

not find directory

一類的錯誤，其實仔細讀錯誤日志就可以看得明白是沒有assents目錄，手動創建assents目錄，之后再次執行上面這段命令行。

這里寫圖片描述

看樣子是正確執行了

再次查看項目目錄可以看到assents中多出來兩個文件

這里寫圖片描述

再次run起來，這個錯誤就完美解決了。

解決是解決完了，回過頭來想一下這個錯誤和assents中的文件index.android.bundle是做什么用的，打開index.android.bundle看看：

這里寫圖片描述

對于Android開發人員來講，可能覺得這簡直沒有辦法看得出來是什么代碼，如果你懂一些js的話，可以看得出來這里面全是js腳本，只是為了節省空間，使用了類似于webpack一類的命令，壓縮了原本便于查看的js代碼。

RN本就是使用js編寫，使用原生的控件來展示的一種策略，又有html的便捷性，又有原生的流暢性。

那這個index.android.bundle毫無疑問就是用來調用原生控件的js腳本，每次當你改變了 index.android.js，你都需要使用上面的代碼片段，來及時的更新index.android.bundle，然后打包才可以把新的index.android.js應用上，所以當沒有index.android.bundle文件時，RN是無法運行的，到這里你應該明白了這個問題的來龍去脈了。

RN頁面展示

然后你就看到了讓你賞心悅目的RN hello world頁面

這里寫圖片描述

怎么樣，很開心吧。

仔細看RN的說明，你可以發現 To get started, edit index.android.js，意思很明確，你只需要編輯index.android.js就可以更改RN項目，index.android.js是程序的根本。

Double tap R on your keyboard to reload,Shake or press menu button for dev menu。

這樣一段話表明，你可以雙擊“R”來重新加載，也可以點擊菜單鍵或者是搖晃手機打開開發菜單。

這里寫圖片描述

到這里你可能不太明白relaod是干嘛用的，其實如果你深入的了解RN，就會明白，RN很重要的一個特性是不用發版就可以更改一些模塊的展示，原理就是更改index.android.js，然后RN項目reload，下載新的index.android.js后，更新index.android.bundle，然后根據index.android.bundle展示新的頁面。

所以我們只要編輯index.android.js，點擊reload，就可以更新頁面了，很酷有沒有。

當你點擊reload時，又報錯了。

could not connect to development server

血紅的頁面又出現了。

這里寫圖片描述