在 react-native 中设置环境变量？

Question

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

例子：

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

原文由 Damon Yuan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我建议不要硬编码您的应用程序常量并切换环境（我稍后会解释如何做到这一点），我建议使用 十二因素 建议让您的构建过程定义您的 BASE_URL 和你的 API_KEY 。

要回答如何将您的环境暴露给 react-native ，我建议使用 Babel 的 babel-plugin-transform-inline-environment-variables 。

要让它工作，你需要下载插件，然后你需要设置一个 .babelrc 它应该看起来像这样：

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

因此，如果您通过运行 API_KEY=my-app-id react-native bundle （或 start、run-ios 或 run-android）来转换您的 react-native 代码，那么您所要做的就是让您的代码如下所示：

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

然后 Babel 将替换为：

 const apiKey = 'my-app-id';

原文由 chapinkapa 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

React Native 没有全局变量的概念。它严格执行 模块化范围，以促进组件的模块化和可重用性。

但是，有时您需要组件来了解它们的环境。在这种情况下，定义一个 Environment 模块非常简单，然后组件可以调用该模块来获取环境变量，例如：

环境.js

 var _Environments = {
    production:  {BASE_URL: '', API_KEY: ''},
    staging:     {BASE_URL: '', API_KEY: ''},
    development: {BASE_URL: '', API_KEY: ''},
}

function getEnvironment() {
    // Insert logic here to get the current platform (e.g. staging, production, etc)
    var platform = getPlatform()

    // ...now return the correct environment
    return _Environments[platform]
}

var Environment = getEnvironment()
module.exports = Environment

我的组件.js

 var Environment = require('./environment.js')

...somewhere in your code...
var url = Environment.BASE_URL

这将创建一个可以从应用程序范围内的任何位置访问的 单例 环境。您必须明确 require(...) 来自任何使用环境变量的组件的模块，但这是一件好事。

原文由 tohster 发布，翻译遵循 CC BY-SA 3.0 许可协议