重啟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
  • 下麵是一個標準的IDistributedCache用例: public class SomeService(IDistributedCache cache) { public async Task<SomeInformation> GetSomeInformationAsync (string na ...
  • 這個庫提供了在啟動期間實例化已註冊的單例,而不是在首次使用它時實例化。 單例通常在首次使用時創建,這可能會導致響應傳入請求的延遲高於平時。在註冊時創建實例有助於防止第一次Request請求的SLA 以往我們要在註冊的時候實例單例可能會這樣寫: //註冊: services.AddSingleton< ...
  • 最近公司的很多項目都要改單點登錄了,不過大部分都還沒敲定,目前立刻要做的就只有一個比較老的項目 先改一個試試手,主要目標就是最短最快實現功能 首先因為要保留原登錄方式,所以頁面上的改動就是在原來登錄頁面下加一個SSO登錄入口 用超鏈接寫的入口,頁面改造後如下圖: 其中超鏈接的 href="Staff ...
  • Like運算符很好用,特別是它所提供的其中*、?這兩種通配符,在Windows文件系統和各類項目中運用非常廣泛。 但Like運算符僅在VB中支持,在C#中,如何實現呢? 以下是關於LikeString的四種實現方式,其中第四種為Regex正則表達式實現,且在.NET Standard 2.0及以上平... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他們的程式記憶體會偶發性暴漲,自己分析了下是非托管記憶體問題,讓我幫忙看下怎麼回事?哈哈,看到這個dump我還是非常有興趣的,居然還有這種游戲幣自助機類型的程式,下次去大玩家看看他們出幣的機器後端是不是C#寫的?由於dump是linux上的程式,剛好win ...
  • 前言 大家好,我是老馬。很高興遇到你。 我們為 java 開發者實現了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何處理的,可以參考我的另一個項目: 手寫從零實現簡易版 tomcat minicat 手寫 ngin ...
  • 上一次的介紹,主要圍繞如何統一去捕獲異常,以及為每一種異常添加自己的Mapper實現,並且我們知道,當在ExceptionMapper中返回非200的Response,不支持application/json的響應類型,而是寫死的text/plain類型。 Filter為二方包異常手動捕獲 參考:ht ...
  • 大家好,我是R哥。 今天分享一個爽飛了的面試輔導 case: 這個杭州兄弟空窗期 1 個月+,面試了 6 家公司 0 Offer,不知道問題出在哪,難道是杭州的 IT 崩盤了麽? 報名面試輔導後,經過一個多月的輔導打磨,現在成功入職某上市公司,漲薪 30%+,955 工作制,不咋加班,還不捲。 其他 ...
  • 引入依賴 <!--Freemarker wls--> <dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.30</version> </dependency> ...
  • 你應如何運行程式 互動式命令模式 開始一個互動式會話 一般是在操作系統命令行下輸入python,且不帶任何參數 系統路徑 如果沒有設置系統的PATH環境變數來包括Python的安裝路徑,可能需要機器上Python可執行文件的完整路徑來代替python 運行的位置:代碼位置 不要輸入的內容:提示符和註 ...