文章

使用 Gitlab cicd 佈署 React Native專案

現在大部分公司的專案都會放在自己的機台,並安裝 Gitlab 做管理,其實身為一個前端工程師,一定會在各種時候需要略懂一些其他領域的知識,就像這篇我要記錄的自動化部署 ,讓每個協作者開發完成後,發佈新版本時候確保專案有適時載入所有 package 與成品有正確上傳到線上環境。只需要額外撰寫 .gitlab-ci.yml 放在根目錄,Gitlab Runner 就可以自動去跑部署流程囉!

因為每間公司的流程跟限制不同,以我自己的例子,我們公司只會有兩種環境 : developmentproduction。另外在 Gitlab Runner 那端由 IT 人員處理,所以這邊無法多作說明,這邊主要就是以前端的角度去實踐。

要做到自動化部署,會經歷以下幾件事 :

  1. 撰寫package.jsonscript
  2. 撰寫deploy.sh
  3. 撰寫.gitlab-ci.yml
閱讀更多

React Native Remote Notification

如何使用 react native + react-native-push-notification + firebase cloud messaging 傳送遠端測試通知到 android emulator

本篇使用的設備跟環境:

  1. windows電腦
  2. 已安裝android studio並且依照RN官網做好設定
  3. npm

要在電腦上的emulator上收到遠端通知,需要準備以下幾件事 :

  1. 創建一個firebase專案
  2. 為firebase專案加入android applications
  3. RN專案安裝react-native-push-notification套件
  4. RN專案設定firebase相關依賴
  5. RN專案訂閱channel
  6. 檢查android emulator是否符合FCM設備要求
  7. 從firebase cloud messaging發送測試通知
  8. 查看是否收到通知

如果你有自己的後端 server(像是 express),似乎你還是需要創建 firebase 專案,差別只在於你可以不用進行第7步驟,其他步驟一樣都是必須的。

閱讀更多

React Native Push Local Notification

在react native中的通知有分兩種,一種是本地通知(自己寫按鈕就可以觸發通知),一種是遠程通知。

遠程通知需要一個firebase帳號,並且創建firebase專案,這部分之後再更新(茶

因為新公司只有提供windows電腦,所以本篇只示範android平台的local通知…QQ

安裝步驟可以參考這裡,但是你懶得看,所以我寫了這篇。

閱讀更多

React Native using Socket.io

我們在 App 中如果 App 是在背景狀態,可以使用手機原生的 notification 進行即時通知,但是如果App目前是打開的狀態,想要及時通知,就需要使用 websocket

在前台RN專案訂閱後端的 socket 服務,必須要跟後端配合,才能順利接收到資料,下一篇文章會分享如何使用 express + socket.io 發送訊息。

package版本 :

  • React Native 0.63.3
  • socket.io-client 2.3.1
閱讀更多

React Native 使用免費Icon ( ios )

如果你要寫 react native,又沒有使用ui框架的話,想要使用 icon,可以安裝react-native-vector-icons,他提供幾乎所有大家會用的 icon 字型。

閱讀更多

React Native 使用 alias,不用寫很多相對路徑。

在React Native 版本0.61.5 ,使用 npx react-native init 建立的專案,自動會幫你安裝 metro-react-native-babel-preset ,並且產生 babel.config.js 這隻檔案
所以只需額外安裝 babel-plugin-module-resolver

$ yarn add babel-plugin-module-resolver -D
閱讀更多