文章

react native 如何判斷圖片網址是否正確？

,

react native 的 Image 組件，通常我們會把一段圖片網址例如：https://domain.com/static/image.jpg 傳進去source.uri，例如：

閱讀更多
/0 評論/通過：

使用 Gitlab cicd 佈署 React Native專案

,

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

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

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

  1. 撰寫package.json的script
  2. 撰寫deploy.sh
  3. 撰寫.gitlab-ci.yml
閱讀更多
/0 評論/通過：

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步驟，其他步驟一樣都是必須的。

閱讀更多
/0 評論/通過：

React Native Push Local Notification

,

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

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

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

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

閱讀更多
/0 評論/通過：

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
閱讀更多
/0 評論/通過：

React Native 使用免費Icon ( ios )

,

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

閱讀更多
/0 評論/通過：

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
閱讀更多
/0 評論/通過：