我如何告诉 react-native 要查看的 .env 文件?

How can I tell react-native what .env file to look at?

在 windows,我正在开发一个白标应用程序并尝试使用环境变量来构建代码特定的版本。我正在使用 react-native-config 并按照他们在 GitHub 上的设置进行操作,但出于某种原因 SET ENVFILE=.env.myenvironment 对我没有任何作用,即使在 build-gradle 中定义了地图,例如这个:

project.ext.envConfigFiles = [
debug: ".env",
release: ".env",
anothercustombuild: ".env.custombuild",
]

有什么想法吗?

我正在使用 vscode 集成终端传递 react-native-config 命令来告诉 RN 要查看哪个 .env 文件,但它根本不起作用..

我开始为 windows 使用 powershell 并尝试了正确的命令。它创造奇迹。例如 $env:ENVFILE=".env.mycustomenvironment"; react-native run-android。它对于 react-native run-ios 和发布版本应该是一样的。

请记住,截至目前(08/20/2019),react-native-config 在将 .env 变量暴露给您的 .JS 文件时无法正常使用 RN 0.60+ 中的产品风格,如果您正在为此寻找解决方法,请查看 但 tl;dr 是将 react-native-configreact-native-build-config.

一起使用

我得到了使用 flavors 的 react-native-config。 (RN 0.60+ ) 您不需要使用其他库。 这是一个对我有用的白色标签示例:

project.ext.envConfigFiles = [
   client1devdebug: ".env.client1.debug",
   client1devrelease: ".env.client1.release",
   client2devdebug: ".env.client2.debug",
   client2devrelease: ".env.client2.release",
]

然后在配置中:

 productFlavors {
    client1 {
      dimension "client"
      resValue "string", "build_config_package", "PACKAGE_NAME_IN MANIFEST"
      applicationId "com.app1"
    }
    client2 {
      dimension "client"
      resValue "string", "build_config_package", "PACKAGE_NAME_IN MANIFEST"
      applicationId "com.app2"
    }
      dev {
          ...
          dimension "environment"
      }
      stage {
          minSdkVersion 21
          resValue "string", "app_name", "Stage"
          dimension "environment"
      }
      production {
          minSdkVersion 21
          resValue "string", "app_name", "Prod"
          dimension "environment"
      }

在 gradle 中配置风格后,为了允许 react-native 查看项目文件夹根目录中的自定义 .env 文件,您必须添加到 android/app/build.gradle

在我的示例中,我使用相同的代码库为 android 设备创建了两个应用程序,一个用于 group1,一个用于 group2

//将此添加到 app/build.gradle

的第 3 行
project.ext.envConfigFiles = [
  projecta: ".env.development.android.projecta",
  projectb: ".env.development.android.projectb",
]

//别忘了加上

android {
  compileSdkVersion rootProject.ext.compileSdkVersion
  flavorDimensions “default” // add this line
  compileOptions {
  sourceCompatibility JavaVersion.VERSION_1_8
  targetCompatibility JavaVersion.VERSION_1_8
}

然后将此数组中的键与您的产品口味进行匹配

  productFlavors {
    project1 {
        minSdkVersion rootProject.ext.minSdkVersion
        applicationId 'com.nativeapp.projecta'
        targetSdkVersion rootProject.ext.targetSdkVersion
        resValue "string", "build_config_package", "com.nativeapp"
    }
    project2 {
        minSdkVersion rootProject.ext.minSdkVersion
        applicationId 'com.nativeapp.projectb'
        targetSdkVersion rootProject.ext.targetSdkVersion
        resValue "string", "build_config_package", "com.nativeapp"
    }
}

还要确保 applicationId 和 resValue 以您的应用程序包名称开头

在我的例子中是 'nativeapp',但您可以在 MainActivity.java 文件中找到您的文件。

如果你深入 android/app/main/java/com/ 目录,你可以找到这个。

在此之后,您可以在需要时配置脚本,如下所示

"scripts": {
"android:project1": "ENVFILE=.env.development.projecta react-native run-android --variant=projectaDebug --appIdSuffix=projecta",
"android:project2": "ENVFILE=.env.development.projectb.android react-native run-android --variant=projectbDebug --appIdSuffix=projectb",}

注意:添加脚本时,变体必须是风味名称,例如 'project2' 后跟 'Debug' = 'projectb' 因为这是您的默认 buildType

还要确保在 android/app/src/ 中为每种口味创建了相关文件夹。

就我而言

android/app/src/projecta/
android/app/src/projecta/

如果所有设置都正确,当您使用您创建的脚本进行构建时,它应该会创建正确的 res 文件夹和 android 清单文件。

如果要更改每个单独应用程序实例的名称,请更改 res/values 目录中的 strings.xml。

<resources>
<string name="app_name">Project1</string> //this will be the name of your app when its built in your emulator
</resources>

将此添加到您的 package.json 文件中:

"yourCustomEnv:android-windows": "SET ENVFILE=.env.yourCustomEnv && npm run android",
"yourCustomEnv:android-mac": "ENVFILE=.env.yourCustomEnv; npm run android",
"yourCustomEnv:ios": "ENVFILE=.env.yourCustomEnv; npm run ios",

然后,在yourCustomEnv模式下运行,运行:

对于Android:

  • 于 windows:

运行 npm run yourCustomEnv:android-windows

  • 于 mac:

运行 npm run yourCustomEnv:android-mac

对于iOS

运行 npm run yourCustomEnv:ios

完整示例

如果我们假设您的自定义环境文件是 .env.staging,请将其添加到您的 package.json 文件中:

"staging:android-windows": "SET ENVFILE=.env.staging && npm run android",
"staging:android-mac": "ENVFILE=.env.staging; npm run android",
"staging:ios": "ENVFILE=.env.staging; npm run ios",

然后,使用 .env.staging 变量 运行,运行:

对于Android:

  • 于 windows:

运行 npm run staging:android-windows

  • 于 mac:

运行 npm run staging:android-mac

对于iOS

运行npm run staging:ios