React Native：process.env仅具有NODE_ENV

Question

我正在构建React Native应用程序（在Windows上），同时设置环境变量：

SET APP_ENV=dev & react-native run-android

echo %APP_ENV% 返回的是 'dev'

但是当我在我的JS文件中记录 process.env 对象时，我只得到了：

{
  NODE_ENV: "development"
}

有没有其他方法可以访问通过命令提示符设置的环境变量？

- Supreet Totagi

Answer 1

需要了解的是，React-Native 应用运行在设备（或模拟器）中，它的环境更像浏览器，而不是 Node.js 进程。

为了与依赖于 process.env.NODE_ENV 执行优化的 Node.js 库实现交叉兼容性，React-Native 添加了全局变量 process 以及 env.NODE_ENV。

如果你想向 React-Native 传递自定义常量，可以使用：https://github.com/luggit/react-native-config

- lopezjurip

---

你链接的 Github 页面明确指出：“请注意，此模块不会为打包混淆或加密机密信息，因此不要将敏感密钥存储在 .env 中。基本上不可能防止用户对移动应用程序秘密进行反向工程，因此设计您的应用程序（和 API）时要考虑到这一点。”因此，如果期望的结果是有一个安全的地方来写入敏感信息，那么这个库就没有帮助了，对吧？ - Morris

@Oucam 我认为这个短语的重点在于，它在移动设备上提供的安全性不会与桌面端相同。由于移动应用程序中的所有内容都打包成 apk/ipa 格式，因此某些人可以将其分解并找到这些数据。 - Evos

Answer 2

您应该安装这个Babel插件

npm install babel-plugin-transform-inline-environment-variables --save-dev

然后将其添加到您的 Babel 配置文件（.babelrc、babel.config.js）中的插件部分。

{
  "plugins": [
    ["transform-inline-environment-variables", {
      "include": [
        "NODE_ENV"
      ]
    }]
  ]
}

然后当你通过内联方式传递变量时，像这样：

API_KEY=dev && react-native run-android

你应该通过理解。

process.env.API_KEY

值将是dev

这在我的Mac终端上运行良好，希望它能回答你的问题。

编辑： 我添加了双“&”，因为只有一个不起作用。

- Hussam Kurd

---

不适用于 RN 0.68.1。 - Lev

确保将所需的环境变量名称添加到include数组中。 Babel插件会内联环境变量。它不是在process.env.API_KEY上“可用”，而是在输出的JavaScript中，process.env.API_KEY被替换为您的环境变量的字符串字面值。 - undefined

Answer 3

我发现解决这个问题最简单的方法是使用react-native-config库，你可以在这里查看。

1. 安装该库：

$ yarn add react-native-config

2. 创建你的.env文件并填写内容。例如：

GOOGLE_MAPS_API_KEY=abcdefgh

3. 从react-native-config导入Config并使用您的变量。

import Config from "react-native-config";
...
console.log('ENV:', Config.GOOGLE_MAPS_API_KEY); // ENV: abcdefgh

P.S.：安装完软件包后，您需要运行npx pod-install来自动链接它，或者如果您的React Native版本早于0.60，则可以手动链接它，按照库中的说明进行操作。

- Rafael Perozin

Answer 4

这些答案，包括React Native Expo环境变量都没有解决问题，但是我找到了react-native-dotenv。

它终于解决了问题：

1. 在终端中运行：yarn add react-native-dotenv --dev
2. 在 babel.config.js（或者 .babelrc）文件中，将 "module:react-native-dotenv" 添加到 plugins 中
3. 在组件中，首先导入 import { REST_API_KEY } from "@env";
4. 在组件中使用如下代码：alert(REST_API_KEY);

当然，alert 只是一个示例 :)

- Daniel Danielecki

---

我已经这样做了，但我想知道是否可以将它放在 process.env 对象中，如果它不是只读的。 - KeitelDOG

不确定，我预计它应该是键=值格式，而不是对象。 - Daniel Danielecki

谢谢，由于 from '@env' 在 NextJS 的 Web 上也可以工作，所以很好，我不再需要 process.env，并且使用相同的应用程序作为 NextJS 和 Native 的混合应用程序一切都运行良好。 - KeitelDOG

有趣。使用eas/原生应用程序构建时，获取环境变量没有问题吗？ - Daniel Danielecki

Answer 5

添加 babel-plugin-transform-inline-environment-variables

npm install babel-plugin-transform-inline-environment-variables --save-dev

babel.config.js:

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

请勿添加"include": ["NODE_ENV"]，然后运行API_KEY=testKey && react-native start，之后您可以通过process.env.API_KEY使用API_KEY，但是奇怪的是，console.log(process.env)只显示一个{NODE_ENV: "development"}，不包含API_KEY。

- KingAmo

---

在 API_KEY=testKey & react-native start 中，应该使用 && 而不是 &。 - Kaushik Wavhal

这对我来说绝对是死亡的 :( - Cody