重啟React Native老項目的奇幻之旅:填坑實錄與解決方案分享

来源:https://www.cnblogs.com/dreampursuer/p/18137611
-Advertisement-
Play Games

這兩天為了重啟五年前基於 React Native(版本 0.59.9)開發的老項目,經過各種填坑查詢等操作,最終把它成功地運行起來了。 在這篇文章中,我將詳述那些遭遇的挑戰以及對應的解決方案,以期為同樣面臨此類困境的開發者提供寶貴的經驗參考。 這個項目涉及到的環境基本版本信息如下: react: ...


這兩天為了重啟五年前基於 React Native(版本 0.59.9)開發的老項目,經過各種填坑查詢等操作,最終把它成功地運行起來了。

在這篇文章中,我將詳述那些遭遇的挑戰以及對應的解決方案,以期為同樣面臨此類困境的開發者提供寶貴的經驗參考。

這個項目涉及到的環境基本版本信息如下:

react: 16.8.3

react-native: 0.59.9

下載Gradle包

本來想著很簡單,因為這個項目在之前是能正常運行的,我的機器環境就沒有改變過,代碼也沒有修改過,所以直接執行如下命令:

react-native run-android

然而現實卻是Gradle包下載緩慢且頻繁中斷,後來就通過上外網的方式把它解決了。

不過這種上網的方式下載也是挺慢的,想以後如果不是通過其它上網方式該如何解決呢?

這裡提供一個鏈接,估計按照下麵的方式應該是能更快地下載Gradle包的。

國內最方便的AndroidStudio Gradle包下載方法

NPM證書過期與鏡像源遷移

想著Gradle下載好了,我又沒有修改過什麼代碼,總可以把項目給運行起來了吧。

然而是我小看整個過程中碰到的難題了。

再次運行 react-native run-android 命令,直接報瞭如下的錯誤:

[npm] ERR: request to https://registry.npm.taobao.org failed, reason: certificate has expired

碰到問題就直接在網上搜索相關問題,瞭解下來應該是 npm.taobao.org 和 registry.npm.taobao.org 功能變數名稱於 2022 年 05 月 31 日零時起停止服務,而 npm.taobao.org 這個網站的證書也於 2024年01月22日過期了,這也就是為啥會出現request to https://registry.npm.taobao.org failed, reason: certificate has expired錯誤的原因。

既然知道了原因,那就把鏡像源給換掉,新的鏡像源要切換成 https://registry.npmmirror.com

網上一搜就知道如何切換了,由於我這邊有時用npm有時用yarn,所以就一起把npm和yarn的鏡像源都設置掉了。

使用的命令如下:

#設置npm的鏡像源
npm config set registry https://registry.npmmirror.com
#設置yarn的鏡像源
yarn config set registry https://registry.npmmirror.com

為了查看鏡像源是否被設置過來了,就用如下的命令進行驗證:

#查看npm當前的鏡像源
npm config get registry
#查看yarn當前的鏡像源
yarn config get registry

經過驗證,當前的鏡像源確實被修改成了https://registry.npmmirror.com

想著這下問題總歸被解決了吧,繼續執行 react-native run-android命令,但出乎我的意料,依然報 request to https://registry.npm.taobao.org failed, reason: certificate has expired 錯誤,而且看起來鏡像源也沒有被切換過來。

難道是npm中代理設置的問題?

那就查看一下目前的代理:

#查看代理
npm config list
yarn config list

發現確實設置過代理,那就先把代理給刪除掉:

# npm刪除代理
npm config delete proxy
npm config delete https-proxy

# yarn刪除代理
yarn config delete proxy
yarn config delete https-proxy

如果以後還要設置代理的話,就把設置代理的命令記錄在這裡,免得以後可以用到:

# npm設置代理
npm config set proxy http://127.0.0.1:8080
npm config set https-proxy http://127.0.0.1:8080

# yarn設置代理
yarn config set proxy http://127.0.0.1:8080
yarn config set https-proxy http://127.0.0.1:8080

刪除了代理後,繼續執行 react-native run-android命令進行驗證,依然報上面的certificate has expired錯誤。看起來有點到了山群水盡的地步,

最後,索性一不做二不休,直接跳過SSL證書驗證,執行下麵的命令。

# 跳過npm SSL證書驗證
npm set strict-ssl false
# 跳過yarn SSL證書驗證
yarn config set "strict-ssl" false -g

再次執行react-native run-android命令,這次certificate has expired錯誤消失了。

至少把問題往前推進了一步。

不過也別高興得太早,又碰到了新的問題。且繼續看下麵的填坑記錄。

Invalid regular expression引發的困擾

這次報告的錯誤消息為:

error Invalid regular expression: 
/(.*\\__fixtures__\\.*|node_modules[\\\]react[\\\]dist[\\\].*|website\\node_modules\\.
*|heapCapture\\bundle\.js|.*\\__tests__\\.*)$/:
 Unterminated character class. Run CLI with --verbose flag for more details.

好家伙,直接報告這一堆亂七八糟的錯誤消息給我,把我給整懵了。

還好遇事不懂網路搜索,最後可以通過下麵的方式進行解決:

修改文件\node_modules\metro-config\src\defaults\blacklist.js,把其中的某段內容替換為:

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

根據這個修改的內容推測應該是某個工具對於windows下的打包路徑正則表達式沒有寫好導致的。

再次執行react-native run-android命令,又出現新的么蛾子了...

程式包com.facebook.react.bridge不存在

這次出現的錯誤消息為:

> Task :react-native-camera:compileGeneralDebugJavaWithJavac
E:\project\exphone\exphoneapp2\node_modules\react-native-camera\android\src\main\java\com\google\android\cameraview\Camera1.java:31: 錯誤: 程式包com.facebook.react.bridge不存在
import com.facebook.react.bridge.ReadableMap;
                                ^
E:\project\exphone\exphoneapp2\node_modules\react-native-camera\android\src\main\java\com\google\android\cameraview\CameraViewImpl.java:23: 錯誤: 程式包com.facebook.react.bridge不存在
import com.facebook.react.bridge.ReadableMap;

依然是上網搜索,找到了一個解決方案:

如果react-native版本低於0.63,在 android\build.gradle 添加如下內容:

def REACT_NATIVE_VERSION = new File(['node', '--print',"JSON.parse(require('fs').readFileSync(require.resolve('react-native/package.json'), 'utf-8')).version"].execute(null, rootDir).text.trim())

allprojects {
    configurations.all {
        resolutionStrategy {
            // Remove this override in 0.65+, as a proper fix is included in react-native itself.
            force "com.facebook.react:react-native:" + REACT_NATIVE_VERSION
        }
    }

我的react-native版本是0.59.9,低於0.63,那就直接用上面的方法。

再次運行react-native run-android進行驗證,這次總算打包成功了!!!

不過也不要高興得太早,預知後事如何,請繼續...

DeviceException: No connected devices

執行後出現如下的異常:

PS E:\project\exphone\exphoneapp2> react-native run-android
(node:18976) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
info Starting JS server...
info Building and installing the app on the device (cd android && gradlew.bat app:installDebug)...
> Task :app:installDebug FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: No connected devices!

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

這個異常的核心是com.android.builder.testing.api.DeviceException: No connected devices!

也就是沒有連接到模擬器。

我用的模擬器是BlueStacks藍疊,這個模擬器要比Google的模擬器快。

需要設置的地方是勾選其中允許ADB連接:

明明我的模擬器啟動起來了,為何不能連接上呢?

輸入命令查看當前模擬器設備:

# adb devices列出模擬器設備
PS E:\project\exphone\exphoneapp2> adb devices
List of devices attached

發現確實沒有顯示出連接上的模擬器。

那我們就手動連接一個:

# 使用adb connect進行連接
PS E:\project\exphone\exphoneapp2> adb connect 127.0.0.1:5555
connected to 127.0.0.1:5555
PS E:\project\exphone\exphoneapp2> adb devices               
List of devices attached
127.0.0.1:5555  device    

連接上android模擬器之後,就繼續用react-native run-android命令進行驗證。

打包成功,android模擬器也連接上了,不過期望的界面沒有呈現,只顯示了一個紅色的醒目的錯誤界面。革命尚未成功,同志還需努力...

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前言 最近有粉絲找到我,說被面試官給問懵了。 粉絲:面試官上來就問“一個vue文件是如何渲染成瀏覽器上面的真實DOM?”,當時還挺竊喜這題真簡單。就簡單說了一下先是編譯成render函數、然後根據render函數生成虛擬DOM,最後就是根據虛擬DOM生成真實DOM。按照正常套路面試官接著會問vue響 ...
  • 最近,群里聊到了一個很有意思的佈局效果。大致效果如下所示,希望使用 CSS 實現如下所示的佈局效果: 正常而言,我們的 HTML 結構大致是如下所示: <div class="g-container"> <div class="g-nav"> <ul> <li>Tab 1</li> <li>Tab ...
  • 一、前期轉杯 確保電腦上已安裝 node.js。 可通過命令 npm --version進行查詢,如果展示了版本號,則說明已安裝,若提示 npm 不是有內部或外部命令,也不是可運行的程式,則說明未安裝,可進入官網下載併進行安裝。 確保已安裝 Vue CLI。 可通過命令 vue --V 查看版本號, ...
  • Commonjs 什麼是 CommonJs CommonJs 是 js 模塊化的社區規範 模塊化產生的原因 隨著前端頁面複雜度的提升,依賴的第三方庫的增加,導致的 js 依賴混亂,全局變數的污染,和命名衝突 單個 js 文件內容太多,導致了維護困難,拆分成為多個文件又會發生第一點描述的問題 v8 引 ...
  • vue3 快速入門系列 - 組件通信 組件通信在開發中非常重要,通信就是你給我一點東西,我給你一點東西。 本篇將分析 vue3 中組件間的通信方式。 Tip:下文提到的絕大多數通信方式在 vue2 中都有,但是在寫法上有一些差異。 準備環境 在 vue3 基礎上進行。 新建三個組件:爺爺、父親、孩子 ...
  • Rubick —— 一款純綠色、效率、開源的桌面端工具箱軟體。軟體支持插件化的方式來安裝工作所需要的任何插件。插件是基於 npm 進行安裝和卸載,非常輕便。 ...
  • splice在英語中的意思是拼接,在實際的代碼使用中,splice就在數組中起到了一個拼接的作用 使用方法 splice(x,y,a,b,c,...) 其中x、y為數字,a、b、c為新添加的項,意思是從數組的第x項開始刪除y項,併在其中添加a、b、c...,其中x、y必填,abc可不填 圖像理解 現 ...
  • 前言 2018年剛入行前端時,公司使用的還是Angular。Angular什麼都好,就是寫代碼時的體驗老糟心了,改一個地方,按下保存之後,要等好幾秒刷新後才能看到效果,Webstorm無比好用的自動保存,對我來說反而像是一個負擔。然而2024年了,Angular已經更新了17版本,還是沒有解決這個問 ...
一周排行
    -Advertisement-
    Play Games
  • 通過WPF的按鈕、文本輸入框實現了一個簡單的SpinBox數字輸入用戶組件並可以通過數據綁定數值和步長。本文中介紹了通過Xaml代碼實現自定義組件的佈局,依賴屬性的定義和使用等知識點。 ...
  • 以前,我看到一個朋友在對一個系統做初始化的時候,通過一組魔幻般的按鍵,調出來一個隱藏的系統設置界面,這個界面在常規的菜單或者工具欄是看不到的,因為它是一個後臺設置的關鍵界面,不公開,同時避免常規用戶的誤操作,它是作為一個超級管理員的入口功能,這個是很不錯的思路。其實Winform做這樣的處理也是很容... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他的程式每次關閉時就會自動崩潰,一直找不到原因讓我幫忙看一下怎麼回事,這位朋友應該是第二次找我了,分析了下 dump 還是挺經典的,拿出來給大家分享一下吧。 二:WinDbg 分析 1. 為什麼會崩潰 找崩潰原因比較簡單,用 !analyze -v 命 ...
  • 在一些報表模塊中,需要我們根據用戶操作的名稱,來動態根據人員姓名,更新報表的簽名圖片,也就是電子手寫簽名效果,本篇隨筆介紹一下使用FastReport報表動態更新人員簽名圖片。 ...
  • 最新內容優先發佈於個人博客:小虎技術分享站,隨後逐步搬運到博客園。 創作不易,如果覺得有用請在Github上為博主點亮一顆小星星吧! 博主開始學習編程於11年前,年少時還只會使用cin 和cout ,給單片機點點燈。那時候,類似async/await 和future/promise 模型的認知還不是 ...
  • 之前在阿裡雲ECS 99元/年的活動實例上搭建了一個測試用的MINIO服務,以前都是直接當基礎設施來使用的,這次準備自己學一下S3相容API相關的對象存儲開發,因此有了這個小工具。目前僅包含上傳功能,後續計劃開發一個類似圖床的對象存儲應用。 ...
  • 目錄簡介快速入門安裝 NuGet 包實體類User資料庫類DbFactory增刪改查InsertSelectUpdateDelete總結 簡介 NPoco 是 PetaPoco 的一個分支,具有一些額外的功能,截至現在 github 星數 839。NPoco 中文資料沒多少,我是被博客園群友推薦的, ...
  • 前言 前面使用 Admin.Core 的代碼生成器生成了通用代碼生成器的基礎模塊 分組,模板,項目,項目模型,項目欄位的基礎功能,本篇繼續完善,實現最核心的模板生成功能,並提供生成預覽及代碼文件壓縮下載 準備 首先清楚幾個模塊的關係,如何使用,簡單畫一個流程圖 前面完成了基礎的模板組,模板管理,項目 ...
  • 假設需要實現一個圖標和文本結合的按鈕 ,普通做法是 直接重寫該按鈕的模板; 如果想作為通用的呢? 兩種做法: 附加屬性 自定義控制項 推薦使用附加屬性的形式 第一種:附加屬性 創建Button的附加屬性 ButtonExtensions 1 public static class ButtonExte ...
  • 在C#中,委托是一種引用類型的數據類型,允許我們封裝方法的引用。通過使用委托,我們可以將方法作為參數傳遞給其他方法,或者將多個方法組合在一起,從而實現更靈活的編程模式。委托類似於函數指針,但提供了類型安全和垃圾回收等現代語言特性。 基本概念 定義委托 定義委托需要指定它所代表的方法的原型,包括返回類 ...