Mirochiu's coding note

這個升級其實沒什麼實際理由只是想升升看，沒想到問題也是很多。 以下分為建置跟測試兩方面的問題整理解法

Stuck on "info starting JS server ...." 最近遭遇yarn android或react-native run-android卡住的問題，是大部分時候都會卡住，偶而正常。查了一些資料表示，＠react-native-community/cli 新版的裡面在啟動server遭遇卡住的問題，

上次沒紀錄會被搞得很亂，下次又得重找所以就紀錄在這裡 先說我目前系統是Ubuntu 20.04，Android Studio版本是Android Studio Arctic Fox | 2020.3.1 Patch 2 Build #AI-203.7717.56.2031.7678000, built on August 27, 2021

使用React-Native開發Android APP時，會使用 react-native run-android 建置並安裝到模擬器。不過在實際運作的專案上，我需要更多的功能。而下面這些指令我都寫在專案的package.json裡以備不時之需。 啟動debug,release,或stage模式 跑指定模式 像是我要開debug或release甚至其他的config，就會用到--variant react-native run-android --variant=release Android APP預設variant至少有debug和release。 跑指定package react-native run-android --variant=debug --appId=com.example.dev 如果你的app的package在debug模式下用另一個package，以便在同一台機器上測試正式或除錯版 建置JS bundle 有時候只是想build js的部份，可以用bundle build就好，指令舉例如下: react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res 不過後來這會生成一些檔案在android/app/src/main/res，導致我的專案APK建置失敗，所以後來就不太使用了 清除Cache 開發用hot-reload有時不管怎樣都不會讀取我的新程式碼，就需要清除cache react-native start --reset-cache 這個指令執行完會啟動RN dev server所以需要再ctrl+c停止 APK建置 建置APK之前會先建置JS bundle 建置正式版 cd android && ./gradlew assembleRelease && nautilus app/build/outputs/apk/release 建置除錯版 cd android && ./gradlew assem...

Ubuntu20.04安裝React-Native install react-native development tools in ubuntu 1. 安裝Node.js和Yarn 請參考我的 前一篇 2. 安裝React-Native的CLI工具 sudo yarn global add react-native-cli 測試一下是否安裝完整 $ react-native -v react-native-cli: 2.0.1 react-native: n/a - not inside a React Native project directory 如果你安裝完沒有辦法打react-native看版本 3. 安裝JDK sudo apt install openjdk-8-jdk 測試一下是否是安裝的jdk $ java -version openjdk version "1.8.0_292" OpenJDK Runtime Environment (build 1.8.0_292-8u292-b10-0ubuntu1~20.04-b10) OpenJDK 64-Bit Server VM (build 25.292-b10, mixed mode) $ javac -version javac 1.8.0_292 如果你是只有裝一套JDK的系統就不需要調整PATH跟JAVA_HOME 4. 設定Android SDK路徑 以我的Android SDK目錄放在/mnt/hdd2/Android/來說，我會在.bashrc下設定 ANDROID_SDK_ROOT=/mnt/hdd2/Android/Sdk ANDROID_HOME=/mnt/hdd2/Android/Sdk PATH=$PATH:${ANDROID_HOME}/platform-tools:${ANDROID_HOME}/tools 5. 編譯你的APP 從cmd編譯 先進入你的Project下的android目錄編譯你的APP 編譯Debug版APP ./gradlew assembleDebug 生成的檔案路徑預設是android/app/build/outputs/apk/debug 編譯Release版APP ./gradlew assembleRelease 生成...

前言 最近因為APP資料處理速度太慢，其中發現一個部分的速度影響是因為parsing時間字串，所以做了時間轉換工具的遷徙，原本用moment到dayjs，因看dayjs使用上與moment接近。在模擬器上跑parsing時間字串的時間至少有2倍的速度提升，實機上則有更大幅度的速度提升。更多的優點是它核心容量很小，可以提高載入速度。 安裝 yarn add dayjs dayjs基本用法 let m = dayjs('時間字串') 之前用moment是 let m = new moment('時間字串') 確認是dayjs物件 m instanceof dayjs // 這個寫法在早期的dayjs沒支援 取用年月日時分秒 秒鐘 m.second(), // 0-59 分鐘 m.minute(), // 0-59 小時 m.hour(), // 0-23 日期 m.date(), // 1-31 月份 m.month(), // 0-11 年分 m.year(), // e.g. 2020 比較時間 相同時間 m1.isSame(m2, 可略的比較時間單位) 時間在後面 m1.isAfter(m2, 可略的比較時間單位) 反之用isBefore 計算時間差 m1.diff(m2, 可略的比較時間單位) 可略的比較時間單位有'day','hour','minute'等等 格式化成字串 m.format() //  相當於  m.format("YYYY-MM-DDTHH:mm:ssZ") m.format('[YYYYescape] YYYY-MM-DDTHH:mm:ssZ[Z]')  在format內用[]可保留使用的字元不被轉換成時間數字，上面的輸出就會是'YYYYescape 2019-01-25T00:00:00-02:00Z' 額外模組 因為dayjs有分模組，來降低整體套件的容量，我這裡介紹列出用到的部分 import   dayjs   from   'dayjs' ; import   pluginExtFmt   from   'dayjs/plugin/advancedFormat' ;  ...

解決自動補完(Autocomplete)問題 要讓VSCode自動補完需要套件支援 在專案下安裝套件 yarn add @types/jest --dev 安裝完後重開VSCode就會出現補完項目了! VSCode其他jest推薦套件 個人推薦還可以安裝VSCode的jest套件，協助執行單一test項目的測試 1. Jest - 當你程式存檔時會自動執行測試 2. Jest Snippets - 寫測試時輸入幾個字就可以產生固定template的套件

因為AppCenter提供CodePush功能，可以直接發布React-Native的js部分程式，讓上架後維護簡單的UI或資料調整便很容易，而且使用起來簡單沒有負擔，所以就決定在我目前的RN項目中套用。 另外，AppCenter提供直接連結到github public/private repo進行自動建置動作的功能，為了完成用RN的DevOps學習計畫，便著手使用AppCenter的Build功能。 AppCenter連結Github本身沒甚麼難度，按幾個確認按鈕就結束了，但是build app總是不會成功。 從AppCenter提供的LOG會得到錯誤訊息區段如下 ============================================================================== Task : Publish build artifacts Description : Publish build artifacts to Azure Pipelines or a Windows file share Version : 1.158.3 Author : Microsoft Corporation Help : https://docs.microsoft.com/azure/devops/pipelines/tasks/utility/publish-build-artifacts ============================================================================== ##[error]Publishing build artifacts failed with an error: Not found PathtoPublish: /Users/runner/work/1/a/build ##[section]Finishing: Publish build 遭遇這個問題起初我以為是APK輸出路徑問題，但是實際上這路徑是前面的script所給的，所以根本問題不是發生在這個區段，而是下面這段，它找不到APK檔案 BUILD SUCCESSFUL in 2m 3s 188 actionable tasks...

這個範例是針對當你push一個tag名稱為v*rel到github上時，它會自動建置react-native android apk並保存output資料夾。 因為我的repo沒有設定檔案的權限, 遭遇gradlew的權限問題, 所以在"Build android release app"加入了chmod +x ./gradlew的動作。 最後會將output資料夾用傳到artifact, 它就可以在github上面抓檔案下來。 提醒:這個範例沒有包含把你的keystore加進去的步驟，一個正常的android app你會需要再修改這個範例加入keystore的設定。

雖然Window10的cmd下找不到react-native指令，但是npm, node, yarn等等都可以用，我主要是使用yarn開發react-native。我也不知道甚麼時候開始有這個問題的，只知道系統剛灌好沒有這個問題。 羅列一些yarn的指令 查看help $ yarn --help 查看yarn已安裝在系統層級的套件 $ yarn global list yarn global v1.22.5 info "react-native-cli@2.0.1" has binaries:    - react-native 查看yarn系統層級的套件目錄 $ yarn global dir C:\Users\{使用者名稱}\AppData\Local\Yarn\Data\global 查看yarn系統層級的執行檔目錄 $ yarn global bin C:\Users\{使用者名稱}\AppData\Local\Yarn\bin 解決找不到react-native指令 查看yarn系統層級的執行檔目錄 將該目錄加入你的環境變數PATH 重啟cmd 完工 如果是其他作業系統可以參考下面這篇加入你的PATH https://stackoverflow.com/questions/43501514/how-to-display-yarn-globally-installed-packages Windows: %LOCALAPPDATA%/Yarn/config/global OSX and Linux non-root: ~/.config/yarn/global Linux if logged in as root: /usr/local/share/.config/yarn/global

最近工作上用了ReactNative處理APP介面，初學的時候一團混亂，目前算是上手了，覺得其實滿方便的，只是還是撞了很多牆。 新的ReactNative 0.60以上版本有自動連結套件的能力，裝好套件就可直接開始用，所以套件說明寫要做的一大堆步驟其實都是多餘的。 需要用到的keyevent及焦點處理很不方便，希望大神們可以寫好焦點控制套件讓我簡單用就好。 還有很多東西沒搞懂，現階段就覺得寫個長官看UI的POC很快!  用ReactNative開發吃盡了我筆電i5-7200U的效能，建議電腦要超過4核心，硬碟能PCIE SSD最好。 ReactNative調整UI很方便，但是如果你要跟互動就開始麻煩。 很多error訊息搞不太清楚錯誤在哪邊。 JSX看起來就是語法糖，其實用原本JS方法都可以寫得出來，寫出來code就跟flutter樣子類似。 function component跟class component有著不太一樣的思考方式。 小東西用function component寫會比較簡潔; 控制欲強的還是寫class component吧!

RN官網上有寫到透過usb線開發，是使用adb reverse來完成的。但是透過wifi/ethernet連線的開發方式我是有看沒有懂，所以這裡簡短紀錄一下確認過的做法。 透過wifi/ethernet連線開發APP 首先當然，你要知道android裝置要可以透過wifi/ethernet連線功能；如無法確定，一般都是用usb，如果你的裝置只能usb就請參考官網的解說就好。 0. 將android裝置連線到同一個wifi/ethernet 因為要透過wifi/ethernet，所以要把開發電腦跟android裝置連線到同一個wifi/ethernet，然後到android的wifi網路設定點詳細看一下IP位址。 1. 連線到該裝置 我的目標裝置IP是192.168.1.101，adb的埠號5555。 adb connect 192.168.1.101:5555 2. 確認可進入該裝置 adb shell 若你的電腦有多個adb device，要改用 adb -s 192.168.1.101:5555 shell 若成功後請輸入exit離開該裝置 如果顯示的是無法連到斷線的裝置，表示你的電腦或網路有阻擋連線，請確認已經把adb加入到防火牆白名單 2.1 開啟Win10預設Defender防火嗆 若你的電腦使用Window10預設的Defender，請前往設定>搜尋框輸入"防火牆">選取"允許應用程式透過Windows Defender防火牆通訊">點擊變更設定 找到adb.exe執行檔加入白名單 3. 啟動你的RN應用程式 npm run android 這時你的APP應該會被RN工具裝到你的Android裝置上，並被叫起。不過這時候畫面應該是顯示無法載入bundle。 4. 啟動RN的開發選項並輸入電腦IP及埠號 adb shell input keyevent 82 接著點選進入Dev Settings，點選Debug server host for device。 上面輸入的82其實就是KEYCODE_MENU，可以叫起RN開發選項。 接著在android裝置上輸入你電腦IP和埠號(以我電腦為例是192.168.1.115:8081)。如果你的android裝置不好輸入文字，可以用adb shell in...