[React Native] 환경 변수 셋팅

카테고리 : Development
태그: development, - React-Native - reactnative - react-native-config - Android - IOS - build.gradle 셋팅 - tmp.xcconfig - 환경변수 가져오기 - iOS (info.plist) - AndroidManifest - build.gradle - env - Pre-actions - Edit Scheme -  New Run Script Action
등록일: 2024년 01월 01일
최근 업데이트: 2024년 01월 01일

---

• 🔥 1. 사전 설치
• 🔥 2. Android
• 🔥 3. IOS
• 🔥 4. 사용방법

🔥 1. 사전 설치

yarn add react-native-config or npm i react-native-config

🔥 2. Android

1. build.gradle 셋팅

• project/android/app/build.gradle

// 빌드 타입마다 .env가 바뀌어야 하는 경우 아래코드 설정 (.env 하나인 경우 무관)
project.ext.envConfigFiles = [
    debug: ".env.debug",
    release: ".env",
    anothercustombuild: ".env.staging",
]

apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle" // 추가

defaultConfig {
	        resValue "string", "build_config_package", "AndroidManifest파일 packageName입력" // 추가
            ...
}

🔥 3. IOS

1. Config파일 생성

2. Configurations에 Config 적용

생성한 Config파일에 아래 코드 추가

#include? "tmp.xcconfig"

3. Pre-actions 추가

Xcode에서 좌측 상단 Product > Scheme > Edit Scheme을 열고

Build > Pre-actions탭에서 좌측 하단 +를 눌러 New Run Script Action클릭

• info.plist

아래 스크립트 코드를 작성

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

"${SRCROOT}/../node_modules/react-native-config/ios/ReactNativeConfig/BuildXCConfig.rb" "${SRCROOT}/.." "${SRCROOT}/tmp.xcconfig"

🔥 4. 사용방법

• 환경변수 선언
• 루트경로의 .env파일 생성

ENV_KEY=VALUE

1. 환경변수 가져오기

import Config from "react-native-config";
Config.ENV_KEY;

2. iOS (info.plist)

<key>CFBundleDisplayName</key>
<string>$(ENV_KEY)</string>

3. AndroidManifest

<application
      android:name=".MainApplication"
      android:label="@string/ENV_KEY"
	  ...
>
</application>

4. build.gradle

versionCode project.env.get("ENV_KEY").toInteger()
versionName project.env.get("ENV_KEY")