iT邦幫忙

2023 iThome 鐵人賽

DAY 11
0
Mobile Development

React Native CLI 開發心法系列 第 11

DAY 11 React Native 環境變數設定 - iOS

  • 分享至 

  • xImage
  •  

上一篇設定好了 Android 的開發環境與環境變數,這篇要來設置 iOS 的環境變數,過程中會使用到 Xcode。

設置 iOS 的環境變數

1. 在 Xcode 中打開 projcet/ios 的檔案。

https://ithelp.ithome.com.tw/upload/images/20230917/201624960vFbSDm89D.png

點擊右鍵 duplicate 複製 Target 兩份,以分別作為 development 和 stage 環境的建置。

2. 接著重新命名這兩個檔案:

左鍵選到檔案,再長按一下即可進入編輯模式,分別替這兩個檔案加上環境的名稱。

https://ithelp.ithome.com.tw/upload/images/20230917/20162496Gv1FZA8ThP.png

3. 重新命名 schemes,打開 Manage Schemes。

https://ithelp.ithome.com.tw/upload/images/20230917/201624963yUtpoNJE3.png

https://ithelp.ithome.com.tw/upload/images/20230917/20162496F1kElwyZY6.png

把剛剛改的檔名這邊也跟著一起改。

4. 設定讀取 env 檔案

https://ithelp.ithome.com.tw/upload/images/20230917/201624960SbYp7CFHv.png

點選 Edit Scheme。

https://ithelp.ithome.com.tw/upload/images/20230917/20162496HtXUT49SlW.png

Edit scheme/Build/Pre-actions
點選左下角的 + 點擊 New Run Script Action

https://ithelp.ithome.com.tw/upload/images/20230917/20162496PiBcK3IRzn.png

首先設定好 Provide build settings from 你選的要設定的scheme,接著在底下內容加入:

cp "${PROJECT_DIR}/../.env.development" "${PROJECT_DIR}/../.env"

https://ithelp.ithome.com.tw/upload/images/20230917/20162496XtjMwcNHOB.png

在 Debug mode 中重複剛剛的步驟:

https://ithelp.ithome.com.tw/upload/images/20230917/20162496HMPH3yIh9f.png

5. 更新 info.plist 檔名

https://ithelp.ithome.com.tw/upload/images/20230917/20162496PlN12B3nNG.png

引入 plist 的地方也要跟著改成新的檔名 Build Settings/Search filter/info.plist File

https://ithelp.ithome.com.tw/upload/images/20230917/201624963gu4nokRMC.png

6. 設定 Podfile 檔案:Pods/Podfile

https://ithelp.ithome.com.tw/upload/images/20230917/201624966qDWzj0HrH.png

target 'project(你的app名稱)' do 找到這行把它移除
abstract_target 'projectCommonPods(你的app名稱CommonPods)' do 加上這行

abstract_target下方加入定義好的三個環境:

https://ithelp.ithome.com.tw/upload/images/20230917/20162496dIvRIm117i.png

7. 設定 Pod :

完成以上設定後,最後就是重新設定 Pod

在 terminel 中輸入:

cd ios && pod install

之後就可以依據環境需求去 Build 成你需要的應用程式。

設定 bundle identifier

根據不同環境去設定 bundle identifier 就可以同時在手機上查看不同環境的應用程式。

點選所要設定的 target/general/identity/ bundle identifier

https://ithelp.ithome.com.tw/upload/images/20230917/20162496g5DxXdI5CE.png

bundle identifier 是能讓手機辨識 iOS APP 的 ID,通常會是 com.你的產品名稱。
因此如果你想要辨識不同環境的 app 可以這樣做:

  • production bundle identifier: com.你的產品名稱
  • stage bundle identifier: com.你的產品名稱.stage
  • development bundle identifier: com.你的產品名稱.dev

當然在 display name 也可以如此,在 display name 產品名稱後面加上環境後綴,可以讓我們能看快速依據 app 名稱快速辨別現在打開的是哪一個環境的版本。

本文同步於此


上一篇
DAY 10 React Native 環境變數設定 - Android
下一篇
DAY 12 React Native Android 打包 - APK & AAB
系列文
React Native CLI 開發心法31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
DL
iT邦新手 5 級 ‧ 2023-10-10 15:51:08

這篇也挺有幫助,
RN菜鳥路過,
對Object-C 或 swift不熟的我
目前對於RN專案完全不會原生也改不動Podfile
原來可以這樣設定

我要留言

立即登入留言