在react native中设置环境变量？

Question

我正在使用react-本地构建一个跨平台的应用程序，但我不知道如何设置环境变量，以便我可以为不同的环境拥有不同的常量。

例子：

development: 
  BASE_URL: '',
  API_KEY: '',
staging: 
  BASE_URL: '',
  API_KEY: '',
production:
  BASE_URL: '',
  API_KEY: '',

Answer 1

在我看来，最好的选择是使用react-nate-config。它支持12因子。

我发现这个包非常有用。您可以设置多个环境，例如开发、暂存、生产。

在Android的情况下，变量也可以在Java类，gradle，Androidanifest.xml等。在iOS的情况下，变量也可用于Obj-C类，我nfo.plist.

你只要创建文件就像

• .env.development

你在这些文件中填入关键字，比如

API_URL=https://myapi.com
GOOGLE_MAPS_API_KEY=abcdefgh

然后使用它：

import Config from 'react-native-config'

Config.API_URL  // 'https://myapi.com'
Config.GOOGLE_MAPS_API_KEY  // 'abcdefgh'

如果你想使用不同的环境，你基本上是这样设置ENVFILE变量的：

ENVFILE=.env.staging react-native run-android

或组装应用程序生产（Android在我的情况下）：

cd android && ENVFILE=.env.production ./gradlew assembleRelease

Answer 2

我发现的最简单（不是最好或理想的）解决方案是使用react native dotenv。只需将“react native dotenv”预设添加到项目根目录下的.babelrc文件中，如下所示：

{
  "presets": ["react-native", "react-native-dotenv"]
}

创建一个. env文件并添加属性：

echo "SOMETHING=anything" > .env

然后在您的项目（JS）中：

js prettyprint-override">import { SOMETHING } from 'react-native-dotenv'
console.log(SOMETHING) // "anything"

Answer 3

与其硬编码应用程序常量并切换环境（稍后我将解释如何切换），我建议使用十二要素建议，让构建过程定义BASE\u URL和API\u键。

为了回答如何将您的环境暴露于react native，我建议使用Babel的Babel插件转换内联环境变量。

要使其正常工作，您需要下载插件，然后需要设置一个.babelrc，它应该如下所示：

{
  "presets": ["react-native"],
  "plugins": [
    "transform-inline-environment-variables"
  ]
}

因此，如果您通过运行API_KEY=my-app-id react-本地bundle（或start、run-ios或run-android）来转置react-本地代码，那么您所要做的就是让您的代码看起来像这样：

const apiKey = process.env['API_KEY'];

然后巴别塔将用以下内容取代：

const apiKey = 'my-app-id';