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

Question

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

示例:

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

Answer 1

我建议使用twelve factor，而不是对您的应用程序常量进行硬编码并在环境中进行切换(我将稍后解释如何执行此操作)。建议让您的构建过程定义您的 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';