如何在我的 RN 应用程序上设置多个环境？

Question

我正在尝试为我的 React Native 应用程序设置多个环境配置，但我在 iOS 设置方面遇到问题。

这是我到目前为止所做的：

我可以使用以下脚本运行应用程序并在环境之间切换

react-native-config

:

"setDev": "ENVFILE=.env",
"setQA": "ENVFILE=.env.qa",
"ios-dev": "yarn setDev react-native run-ios --mode=Debug --scheme \"myAppDev\" --simulator='iPhone 13'",
"ios-qa": "yarn setQA react-native run-ios --mode=Debug --scheme \"myAppQa\" --simulator='iPhone 13'",
"android-dev": "yarn setDev  react-native run-android",
"android-qa": "yarn setQA  react-native run-android",

但是，我遇到了 Firebase 配置问题。

在我的项目结构中，我有 GoogleService 文件：

ios文件夹
- myApp 文件夹
  - Firebase 文件夹
    - DEV/GoogleService-Info.plist
    - QA/GoogleService-Info.plist

我在 Xcode 中创建了两个方案：

myAppQa：

在编辑方案中，我添加了一个环境变量
```
QA
```
，其值为
```
1
```
。

在Pre-Actions中，我添加了这个脚本：

echo ".env.qa" > /tmp/envfile touch "${PROJECT_DIR}/../node_modules/react-native-config/ios/ReactNativeConfig/BuildDotenvConfig.rb"

myAppDev：
- 类似地，我将
```
DEV
```
  环境变量设置为
```
1
```
  并将其指向
```
.env.dev
```
  。环境
```
DEV
```
  的值为
```
1
```

然后，在

AppDelegate.mm

中，我添加了以下代码以根据构建配置加载正确的

GoogleService-Info.plist

文件：


// TODO: Add PROD ENV

NSString *filePath;
#if DEV
filePath = [[NSBundle mainBundle] pathForResource:@"Firebase/DEV/GoogleService-Info" ofType:@"plist"];
#elif QA
filePath = [[NSBundle mainBundle] pathForResource:@"Firebase/QA/GoogleService-Info" ofType:@"plist"];
#else 
filePath = [[NSBundle mainBundle] pathForResource:@"Firebase/PROD/GoogleService-Info" ofType:@"plist"];
#endif

FIROptions *options = [[FIROptions alloc] initWithContentsOfFile:filePath];
if ([FIRApp defaultApp] == nil) {
  [FIRApp configureWithOptions:options];
}

当我运行

yarn ios-qa

时，应用程序会成功构建，并且通过

react-native-config

，我可以访问正确的环境变量。但是，加载的 Firebase

GoogleService-Info.plist

是

PROD

（来自

else

中的

AppDelegate

块）。似乎方案中定义的环境变量没有被识别。

rn的版本是：

"react-native": "0.71.7",

我在这里缺少什么？我是个新人，对 ios 和 xcode 不太熟悉，所以任何建议将不胜感激！

Answer 1

创建环境文件在 React Native 项目的根目录中创建以下文件：

.env.开发

API_URL=https://dev-api.example.com .env.staging

明文复制代码

API_URL=https://staging-api.example.com
.env.production

API_URL=https://api.example.com

安装react-native-config 您可以使用react-native-config库来管理环境变量。使用以下命令安装它：

npm 安装react-native-config --save

对于 iOS，请确保链接库：

npx pod-install

修改构建配置 iOS 设置：

在 Xcode 中打开您的项目。为每个环境（例如开发、登台、生产）创建一个新方案。为每个方案设置适当的构建配置（通常为开发调试和生产发布）。使用以下行在“构建阶段”>“新运行脚本阶段”中添加运行脚本：

echo ".env.$(CONFIGURATION)" > /tmp/envfile

安卓设置：

打开你的 android/app/build.gradle 文件。

为每种环境定义产品风味：

android {
    ...
    flavorDimensions "env"
    productFlavors {
        development {
            dimension "env"
            resValue "string", "build_config_package", "com.example.dev"
        }
        staging {
            dimension "env"
            resValue "string", "build_config_package", "com.example.staging"
        }
        production {
            dimension "env"
            resValue "string", "build_config_package", "com.example.prod"
        }
    }
}

映射每种风格的环境文件：

project.ext.envConfigFiles = [
    development: ".env.development",
    staging: ".env.staging",
    production: ".env.production",
]

访问环境变量在 React Native 组件中，您可以使用以下方式访问这些变量：

从“react-native-config”导入配置；

console.log(Config.API_URL); // 输出当前环境的API_URL
在特定环境下运行应用程序要在不同环境中运行应用程序：

iOS：在Xcode中选择合适的方案并运行。

Android：使用以下命令：

npx react-native run-android --variant=developmentDebug
npx react-native run-android --variant=stagingDebug
npx react-native run-android --variant=productionRelease

测试确保记录一些环境变量以验证是否加载了正确的配置。

此设置应该可以帮助您在 React Native 应用程序中有效管理多个环境。如果您还有其他问题或需要澄清，请随时询问！

如何在我的 RN 应用程序上设置多个环境？

问题描述投票：0回答：1

1个回答

最新问题

如何在我的 RN 应用程序上设置多个环境？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1