React Native在Android當(dāng)中實(shí)踐（一）——背景介紹

React Native在Android當(dāng)中實(shí)踐（二）——搭建開(kāi)發(fā)環(huán)境

React Native在Android當(dāng)中實(shí)踐（三）——集成到Android項(xiàng)目當(dāng)中

React Native在Android當(dāng)中實(shí)踐（四）——代碼集成

React Native在Android當(dāng)中實(shí)踐（五）——常見(jiàn)問(wèn)題

常見(jiàn)問(wèn)題

若出現(xiàn)libgnustl_shared.so" is 32-bit instead of 64-bit類似錯(cuò)誤

這個(gè)問(wèn)題是由于ReactNative兼容64位Android手機(jī)導(dǎo)致的。 解決辦法: 1.在項(xiàng)目的根目錄的?gradle.properties?里面添加一行代碼 ?android.useDeprecatedNdk=true. 2.在?build.gradle?文件里添加以下代碼

android {defaultConfig {ndk {abiFilters "armeabi-v7a", "x86"}packagingOptions {exclude "lib/arm64-v8a/librealm-jni.so"}} } 復(fù)制代碼

若出現(xiàn)react-native run-android Android project not found

出現(xiàn)這個(gè)問(wèn)題主要是因?yàn)閍ndroid項(xiàng)目的目錄結(jié)構(gòu)跟react-native支持的目錄結(jié)構(gòu)不一致導(dǎo)致的。 提示：當(dāng)然了你也可以運(yùn)行“react-native upgrade”，該命令運(yùn)行之后你會(huì)發(fā)現(xiàn)你的android項(xiàng)目的目錄結(jié)構(gòu)變化了。 之后 在運(yùn)行react-native run-android即可。

若出現(xiàn)Could not get BatchedBridge, make sure your bundle is packaged correctly

這是因?yàn)閎undle沒(méi)有打包好。找不到編譯打包后的js文件。其實(shí)就是android studio默認(rèn)的尋找js文件地址和react-native自己的工具編譯所使用的地址不同。

若出現(xiàn)Could not connect to development server

首先 我們先翻譯一下 連接不到開(kāi)發(fā)的服務(wù)器。 請(qǐng)按照以下的步驟來(lái)修復(fù)此問(wèn)題： 確保包服務(wù)器在運(yùn)行 確保你的設(shè)備或者模擬器連接著電腦，并且手機(jī)打開(kāi)了USB調(diào)試模式，然后在cmd中運(yùn)行adb devices來(lái)查看已經(jīng)連接好的設(shè)備列表 確保飛行模式是關(guān)閉的 如果是使用真機(jī)來(lái)開(kāi)發(fā)，輸入 adb reverse tcp:8081 tcp:8081來(lái)檢查設(shè)備 輸入IP：8081（這個(gè)大家都會(huì)） 解決辦法: 1、首先檢查包服務(wù)器是否運(yùn)行正常。 ? ? ? ?在項(xiàng)目文件夾下輸入react-native start或者npm start均可開(kāi)啟服務(wù)器，但是我們需要在PC端確認(rèn)包服務(wù)器是否運(yùn)行正常。檢查網(wǎng)址為：http://localhost:8081/index.android.bundle?platform=android （1）說(shuō)說(shuō)我遇到的問(wèn)題，開(kāi)啟包服務(wù)器之后，cmd中顯示如下： 出現(xiàn)React packager ready就走不動(dòng)了。 ? ? ? 當(dāng)我看開(kāi)http://localhost:8081/index.android.bundle?platform=android網(wǎng)址?時(shí)，沒(méi)有正常顯示，但是也沒(méi) 有顯示“該網(wǎng)頁(yè)無(wú)法訪問(wèn)”，只是一直在轉(zhuǎn)圈圈刷新網(wǎng)頁(yè)，就是打不開(kāi)。 包服務(wù)器中使用到了node，所以應(yīng)該和node版本和配置有一定的關(guān)系。所以我就卸掉 node，重新安裝了最新版本的node，之后包服務(wù)器打開(kāi)，網(wǎng)頁(yè)可以正常訪問(wèn)，如下所示： 2、檢查硬件連接，以及使用adb devices來(lái)查看是否連接成功。

3、飛行模式關(guān)閉

4、在cmd中輸入 adb reverse tcp:8081 tcp:8081，結(jié)果如下：

個(gè)人認(rèn)為解決辦法如下： 手機(jī)-設(shè)置-應(yīng)用程序-開(kāi)發(fā)-usb調(diào)試打開(kāi)再關(guān)閉一次 重啟手機(jī)，usb調(diào)試打開(kāi)再關(guān)閉一次 在cmd下Try "adb kill-server" and then "adb start-server" 本人測(cè)試機(jī)為android 5.0+系統(tǒng)，使用第二種方法解決問(wèn)題。結(jié)果如下：

5、搖一搖手機(jī)選擇Dev Settings 輸入IP：8081。

Make sure your bundle is packaged correctly or your're running a packager server

出現(xiàn)這個(gè)問(wèn)題是由于

index.android.bundle是用來(lái)調(diào)用原生控件的js腳本，每次當(dāng)改變了 index.android.js，都需要使用上面的代碼片段，來(lái)及時(shí)的更新index.android.bundle，然后打包才可以把新的index.android.js應(yīng)用上，所以當(dāng)沒(méi)有index.android.bundle文件時(shí)，React-Native 項(xiàng)目是無(wú)法運(yùn)行的。

解決辦法是

第一步：在Android/app/src/main目錄下創(chuàng)建一個(gè)空的assets文件夾（若已經(jīng)存在請(qǐng)忽略） 出現(xiàn)這個(gè)問(wèn)題是由于

index.android.bundle是用來(lái)調(diào)用原生控件的js腳本，每次當(dāng)改變了 index.android.js，都需要使用上面的代碼片段，來(lái)及時(shí)的更新index.android.bundle，然后打包才可以把新的index.android.js應(yīng)用上，所以當(dāng)沒(méi)有index.android.bundle文件時(shí)，React-Native 項(xiàng)目是無(wú)法運(yùn)行的。

解決辦法是

第一步：在Android/app/src/main目錄下創(chuàng)建一個(gè)空的assets文件夾（若已經(jīng)存在請(qǐng)忽略）

第二步：在Android Studio的Terminal進(jìn)入項(xiàng)目根目錄執(zhí)行下面代碼：

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/

運(yùn)行完畢后可以看到如下表示已經(jīng)成功了

同時(shí)在assets文件夾下會(huì)多出index.android.bundle和index.android.bundle.meta兩個(gè)文件 如果已經(jīng)有了資源文件，但是依舊有以上提示，那么對(duì)于真機(jī)來(lái)說(shuō)搖晃手機(jī)會(huì)出現(xiàn)一些界面 選擇最后一個(gè) 進(jìn)入如下界面 輸入本機(jī)的ip地址（注意手機(jī)和電腦在一個(gè)局域網(wǎng)） 別忘了加上端口號(hào)8081 如圖 確認(rèn)之后返回然后搖動(dòng)打開(kāi)調(diào)試頁(yè)面選擇 重新加載之后，就會(huì)出現(xiàn)我們期盼已久的“Hello,World”

React Native的開(kāi)發(fā)者模式

會(huì)發(fā)現(xiàn)頂部有這樣的一條 這是正在從網(wǎng)絡(luò)加載相關(guān)內(nèi)容，當(dāng)我們修改的時(shí)候，內(nèi)容也會(huì)有相應(yīng)的修改。但是如果網(wǎng)絡(luò)狀況不太好的時(shí)候，想必會(huì)對(duì)我們的用戶體驗(yàn)造成不小的影響。

寫在最后

從我個(gè)人用 React Native 開(kāi)發(fā) APP 的體驗(yàn)來(lái)看，React Native 適合 C/S 結(jié)構(gòu)、業(yè)務(wù)型的 APP 或其中的模塊，對(duì)于偏重底層技術(shù)的比如工具類 APP （或者模塊），我還沒(méi)有使用 RN 嘗試過(guò)，不過(guò)想必顯然是不太適合的。總的來(lái)說(shuō)，一個(gè)對(duì)于底層技術(shù)依賴不多，業(yè)務(wù)型，尤其是業(yè)務(wù)變動(dòng)頻繁的應(yīng)用或模塊適合 RN 開(kāi)發(fā)，而且一次開(kāi)發(fā)，基本可以完全重用于兩個(gè)平臺(tái)，重要的是可以熱更新來(lái)應(yīng)對(duì)業(yè)務(wù)邏輯更新頻繁、更新要求快、迅速修復(fù)線上 bug 等需求場(chǎng)景，目前看，RN 的熱更新并沒(méi)有被 Apple 封殺。 1.?無(wú)需編譯，我在第一次編譯了ipa裝好以后，就再也沒(méi)更新過(guò)app，只要更新云端的js代碼，reload一下，整個(gè)界面就全變了。 2.?多數(shù)布局代碼都是JSX，所有Native組件都是標(biāo)簽化的，這對(duì)于前端程序員來(lái)說(shuō)，降低了不少學(xué)習(xí)成本，也大大減少了代碼量。不信你可以看看JSX編譯后的代碼。 3.?復(fù)用React系統(tǒng)，也減少了一定學(xué)習(xí)和開(kāi)發(fā)成本，更重要的是利用了React里面的分層和diff機(jī)制。js層傳給Native層的是一個(gè)diff后的json，然后由Native將這個(gè)數(shù)據(jù)映射成真正的布局視圖。 4.?css-layout也是點(diǎn)睛之筆，前端可以繼續(xù)用熟悉的類css方式來(lái)編寫布局，通過(guò)這個(gè)工具轉(zhuǎn)換成constrain布局。 5.?系統(tǒng)只有js-objc的單向調(diào)用，就是把原生UI組件的方法通過(guò)javascritcore或者webview（低版本iOS）映射到j(luò)s中來(lái)，整個(gè)調(diào)用過(guò)程是異步的，這樣的設(shè)計(jì)令React native可以讓js運(yùn)行在桌面chrome中，通過(guò)websocket連接Native code和桌面chrome，極大地方便了調(diào)試。對(duì)其中的機(jī)制Bang的一篇文章寫得很詳細(xì)，我就不拾人牙慧了：React Native通信機(jī)制詳解 ? bang’s blog?。但這樣設(shè)計(jì)也會(huì)帶來(lái)一些問(wèn)題，后面說(shuō)。 6.?點(diǎn)按操作也被抽象成了一組組件（TouchableXXX），這種抽象方式是我在之前做類似工作中沒(méi)有想到的。facebook還列出Native為什么和web「手感」不同的原因：實(shí)時(shí)的點(diǎn)按反饋和取消能力。React Native?這套相應(yīng)機(jī)制設(shè)計(jì)得很完善，能像Native code那樣控制整個(gè)點(diǎn)按操作的所有過(guò)程。 7.?Debug相當(dāng)方便！修改了js以后，通過(guò)內(nèi)建的nodejs watcher編譯成bundle，在模擬器里面按cmd+r就可以看到效果。而且按cmd+d，可以打開(kāi)一個(gè)chrome窗口，所有的js都移到了chrome里面運(yùn)行，所以什么斷點(diǎn)單步打調(diào)用棧，都不在話下。

上面的既是特點(diǎn)也是優(yōu)點(diǎn)，下面說(shuō)說(shuō)缺點(diǎn)，或者應(yīng)該說(shuō)：「仍然遺留的問(wèn)題」，在我看來(lái)，這個(gè)方案已經(jīng)超越了Hybird方案。 1.?系統(tǒng)仍然（不得不）依賴原生組件暴露出來(lái)的組件和方法。舉兩個(gè)例子，ScrollView這個(gè)組件，在Native層是有大量事件的，scrollViewWillBeginDragging， scrollViewWillEndDragging，scrollViewDidEndDragging等等，這些事件在現(xiàn)有的版本都沒(méi)有暴露，基本上做不了組件聯(lián)動(dòng)效果。另外，這個(gè)版本中有大量組件是iOS only的：ActivityIndicatorIOS、DatePickerIOS、NavigatorIOS、PickerIOS、SliderIOS、SwitchIOS、TabBarIOS、AlertIOS、AppStateIOS、LinkingIOS、PushNotificationIOS、StatusBarIOS、VibrationIOS，反過(guò)來(lái)看，剩余的都是一些抽象程度極強(qiáng)的基本組件。這樣，用戶必須在不同的平臺(tái)下寫兩套代碼，而且所有能力仍然強(qiáng)烈依賴 React native 開(kāi)發(fā)人員暴露的接口。 2.?由于最外層是React，初次學(xué)習(xí)成本高，不像往常的Hybird方案，只要多學(xué)幾個(gè)JS API就可以開(kāi)始干活了。當(dāng)然，React的確讓后續(xù)開(kāi)發(fā)變得簡(jiǎn)單了一些，這么一套外來(lái)的（基于iOS）、殘缺不全的（css-layout）在React的包裝下，的確顯得不那么面目可憎了。 另外，React Native仍然很不完善。文檔還不全，我基本上是看著他的示例代碼完成的demo，集成到已有app的文檔也是今天才出來(lái)。按照官方的說(shuō)法，Android版本要到半年后才發(fā)布：Blog | React?，屆時(shí)整個(gè)系統(tǒng)設(shè)計(jì)可能還會(huì)有很大的變化。 ######參考 www.zhihu.com/question/27… github.com/reactnative… www.lcode.org/category/re…

轉(zhuǎn)載于:https://juejin.im/post/5bbd7139e51d450e8377b714

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的React Native在Android当中实践（五）——常见问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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