React Native在Android當中實踐(五)——常見問題

React Native在Android當中實踐(一)——背景介紹

React Native在Android當中實踐(二)——搭建開發環境

React Native在Android當中實踐(三)——集成到Android項目當中

React Native在Android當中實踐(四)——代碼集成

React Native在Android當中實踐(五)——常見問題

常見問題

若出現libgnustl_shared.so" is 32-bit instead of 64-bit類似錯誤

這個問題是由于ReactNative兼容64位Android手機導致的。 解決辦法: 1.在項目的根目錄的?gradle.properties?里面添加一行代碼 ?android.useDeprecatedNdk=true. 2.在?build.gradle?文件里添加以下代碼

android {defaultConfig {ndk {abiFilters "armeabi-v7a", "x86"}packagingOptions {exclude "lib/arm64-v8a/librealm-jni.so"}}
}
復制代碼
若出現react-native run-android Android project not found

出現這個問題主要是因為android項目的目錄結構跟react-native支持的目錄結構不一致導致的。 提示:當然了你也可以運行“react-native upgrade”,該命令運行之后你會發現你的android項目的目錄結構變化了。 之后 在運行react-native run-android即可。

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

這是因為bundle沒有打包好。找不到編譯打包后的js文件。其實就是android studio默認的尋找js文件地址和react-native自己的工具編譯所使用的地址不同。

若出現Could not connect to development server

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

3、飛行模式關閉

4、在cmd中輸入 adb reverse tcp:8081 tcp:8081,結果如下:

個人認為解決辦法如下: 手機-設置-應用程序-開發-usb調試打開再關閉一次 重啟手機,usb調試打開再關閉一次 在cmd下Try "adb kill-server" and then "adb start-server" 本人測試機為android 5.0+系統,使用第二種方法解決問題。結果如下:

5、搖一搖手機選擇Dev Settings 輸入IP:8081。

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

出現這個問題是由于

index.android.bundle是用來調用原生控件的js腳本,每次當改變了 index.android.js,都需要使用上面的代碼片段,來及時的更新index.android.bundle,然后打包才可以把新的index.android.js應用上,所以當沒有index.android.bundle文件時,React-Native 項目是無法運行的。

解決辦法是

第一步:在Android/app/src/main目錄下創建一個空的assets文件夾(若已經存在請忽略) 出現這個問題是由于

index.android.bundle是用來調用原生控件的js腳本,每次當改變了 index.android.js,都需要使用上面的代碼片段,來及時的更新index.android.bundle,然后打包才可以把新的index.android.js應用上,所以當沒有index.android.bundle文件時,React-Native 項目是無法運行的。

解決辦法是

第一步:在Android/app/src/main目錄下創建一個空的assets文件夾(若已經存在請忽略)

第二步:在Android Studio的Terminal進入項目根目錄執行下面代碼:

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/

運行完畢后可以看到如下表示已經成功了

同時在assets文件夾下會多出index.android.bundle和index.android.bundle.meta兩個文件
如果已經有了資源文件,但是依舊有以上提示,那么對于真機來說搖晃手機會出現一些界面
選擇最后一個
進入如下界面
輸入本機的ip地址(注意手機和電腦在一個局域網)
別忘了加上端口號8081 如圖
確認之后返回然后搖動打開調試頁面選擇
重新加載之后,就會出現我們期盼已久的“Hello,World”

React Native的開發者模式

會發現頂部有這樣的一條
這是正在從網絡加載相關內容,當我們修改的時候,內容也會有相應的修改。但是如果網絡狀況不太好的時候,想必會對我們的用戶體驗造成不小的影響。

寫在最后

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

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

轉載于:https://juejin.im/post/5bbd7139e51d450e8377b714

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/281941.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/281941.shtml
英文地址,請注明出處:http://en.pswp.cn/news/281941.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

完成登錄與注冊頁面的前端

完成登錄與注冊頁面的HTMLCSSJS,其中的輸入項檢查包括: 用戶名6-12位 首字母不能是數字 只能包含字母和數字 密碼6-12位 注冊頁兩次密碼是否一致 JS: function fnLogin() {var uSer document.getElementById("user");var pAss do…

mysql505復位密碼_mysql5 如何復位根用戶密碼[官方文檔]

如何復位根用戶密碼如果你從未為MySQL設置根用戶密碼,服務器在以根用戶身份進行連接時不需要密碼。但是,建議你為每個賬戶設置密碼如果你以前設置了根用戶密碼,但卻忘記了該密碼,可設置新的密碼。下述步驟是針對Windows平臺的。在…

WPF效果第二百零一篇之實現合并單元格

早一段時間又一次出差青海省西寧市;回來又是總結又是各種瑣事,也沒顧得上去分享點東西;大周末的就在家分享一下,這二天再次基于ListBox實現的合并單元格的效果:1、ListBox嵌套ListBox的前臺布局:<ListBox ItemsSource"{Binding LCPListData}" x:Name"Manufac…

轉載 maven 詳解 http://www.cnblogs.com/binyue/p/4729134.html

--聲明規范 <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <!--聲…

ASP.NET Core中使用EasyCaching作為緩存抽象層

簡介做后端開發&#xff0c;緩存應該是天天在用&#xff0c;很多時候我們的做法是寫個幫助類&#xff0c;然后用到的時候調用一下。這種只適合簡單層次的應用&#xff1b;一旦涉及到接口實現調整之類的&#xff0c;這種強耦合的做法很不合適。有些其他的功能又要去重復造輪子。…

mysql qps如何查看_mysql狀態查看 QPS/TPS/緩存命中率查看

運行中的mysql狀態查看對正在運行的mysql進行監控&#xff0c;其中一個方式就是查看mysql運行狀態。(1)QPS(每秒Query量)QPS Questions(or Queries) / uptimemysql > show global status like Question%;mysql > show global status like uptime%;(2)TPS(每秒事務量…

visual studio開啟多核編譯方法

先按http://blog.csdn.net/acaiwlj/article/details/50240625的方法進行了VS多線程的啟動。 原本以為按以下步驟設置就OK了&#xff0c;但是編譯中無意間發些了一個warning&#xff1a;“/Gm”與多處理不兼容&#xff1b;忽略 /MP 開關&#xff01;&#xff01;&#xff01;&am…

聊聊storm nimbus的LeaderElector

為什么80%的碼農都做不了架構師&#xff1f;>>> 序 本文主要研究一下storm nimbus的LeaderElector Nimbus org/apache/storm/daemon/nimbus/Nimbus.java public static void main(String[] args) throws Exception {Utils.setupDefaultUncaughtExceptionHandler();…

Android框架式編程之BufferKnife

BufferKnife作為框架式編程的重要組成部分&#xff0c;使用BufferKnife能夠極大的精簡View層面的代碼量&#xff0c;并為MVP/MVC方式提供輔助。 一、配置 compile com.jakewharton:butterknife:(insert latest version) annotationProcessor com.jakewharton:butterknife-compi…

如果我去深圳,你會見我嗎

▲圖/ 深圳夜景初次見易小姐&#xff0c;還是21年的春節回老家的時候。想來20年因為疫情沒有回家&#xff0c;家母幾次三番電話里頭表達的思念以及建議一些不靠譜的回家計劃&#xff0c;著實有些不忍&#xff0c;確實有似“兒行千里母擔憂”之理&#xff0c;索性拿著年假和加班…

CodeForces - 1059D(二分+誤差)

鏈接&#xff1a;CodeForces - 1059D 題意&#xff1a;給出笛卡爾坐標系上 n 個點&#xff0c;求與 x 軸相切且覆蓋了所有給出點的圓的最小半徑。 題解&#xff1a;二分半徑即可。判斷&#xff1a;假設當前二分到的半徑是 R &#xff0c;因為要和 x 軸相切&#xff0c;所以圓心…

pureref 平移用不了_關于參考圖管理神器 PureRef 的一些快捷鍵

PureRef 的一些快捷鍵 軟件下載&#xff1a;點擊這里控制(配合左鍵)窗口內鼠標左鍵     框選窗口邊鼠標左鍵     調整窗口大小鼠標中鍵 或 按住Alt     移動畫布鼠標滾輪 或 按住Z     縮放畫布按住S     查看目標位置顏色信息(可復制16進制顏色…

Windows 10 版本信息

Windows 10 版本信息 原文 https://technet.microsoft.com/zh-cn/windows/release-info Windows 10 版本信息 Microsoft 已更新其服務模型。 半年頻道每年發布兩次功能更新&#xff0c;時間大概在 3 月和 9 月&#xff0c;每個版本的服務時間線為 18 個月。 從 Windows 10 版本…

開源輕量的 .NET 監控工具 - 看門狗

你好&#xff0c;這里是 Dotnet 工具箱&#xff0c;定期分享 Dotnet 有趣&#xff0c;實用的工具或組件&#xff0c;希望對您有用&#xff01;簡介WatchDog 是一個使用 C# 開發的開源的輕量監控工具&#xff0c;它可以記錄和查看 ASP.Net Core Web 和 WebApi 的實時消息、事件、…

python讀取oracle數據庫性能_用python對oracle進行簡單性能測試

一、概述dba在工作中避不開的兩個問題&#xff0c;sql使用綁定變量到底會有多少的性能提升&#xff1f;數據庫的審計功能如果打開對數據庫的性能會產生多大的影響&#xff1f;最近恰好都碰到了&#xff0c;索性做個實驗。sql使用綁定變量對性能的影響開通數據庫審計功能對性能的…

BZOJ 3231: [Sdoi2008]遞歸數列 (JZYZOJ 1353) 矩陣快速冪

http://www.lydsy.com/JudgeOnline/problem.php?id3231和斐波那契一個道理在最后加一個求和即可1 #include<cstdio>2 #include<cstring>3 #include<iostream>4 //using namespace std;5 const int maxn10010;6 const double eps1e-8;7 long long modn;8 lon…

馬斯克的火箭上天了,SpaceX開源項目也登上了熱榜!

python知識手冊SpaceX于美國東部時間5月30日下午3&#xff1a;22分將兩位美國宇航員送往國際空間站&#xff0c;雖然這只是Demo任務&#xff0c;但SpaceX已經以其卓越工程優勢、低廉的發射成本贏得了全球航天產業的信賴。同時也是除美俄中這些航天國家隊以外&#xff0c;唯一獨…

EasyMock學習筆記

目前在接觸平臺側的開發&#xff0c;發現平臺側的東西和以前javacard開發很不一樣&#xff0c;看來以后要學的東西還有很多很多。今天接觸了下EasyMock。 Mock 方法是單元測試中常見的一種技術&#xff0c;它的主要作用是模擬一些在應用中不容易構造或者比較復雜的對象&#xf…

app啟動廣告頁的實現,解決了廣告圖片要實時更新的問題

網上很多的實現方法很多都是顯示第一次的緩存的圖片&#xff0c;這樣就造成后臺更新廣告圖片App不能實時展示的問題。 我的具體實現思路是&#xff1a; 1.啟動時先獲取啟動頁的圖片全屏展示。 2.設計一個等待時間&#xff0c;如果超過等待時間還沒拿到圖片就把獲取的啟動頁去掉…

vue中點擊插入html_Vue中插入HTML代碼的方法

我們需要吧Hello World插入到My name is Pjee應該如何做&#xff1f;一、使用v-htmlv-html:更新元素的 innerHTMLconst text Hello World>My name is Pjee注意&#xff1a;你的站點上動態渲染的任意 HTML 可能會非常危險&#xff0c;因為它很容易導致 XSS 攻擊。請只對可信…