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"
}

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

Answer 1

重要的是要知道 React-Native 应用程序在更像浏览器的环境中的设备（或模拟器）上运行，而不是 Node.js 进程。

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

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

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 终端上对我有用，希望它能回答你的问题

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

PS：安装包后，您需要运行npx pod-install来自动链接它，或者如果您的 React Native 版本低于 0.60，请按照库上的说明手动链接它。

Answer 4

添加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

Answer 5

您可以安装react-native-dotenv 。

并import { API_KEY, ANOTHER_CONFIG } from 'react-native-dotenv'您首选文件中的import { API_KEY, ANOTHER_CONFIG } from 'react-native-dotenv'导入您的变量，例如import { API_KEY, ANOTHER_CONFIG } from 'react-native-dotenv' 。

加

{
  "presets": ["module:metro-react-native-babel-preset", "module:react-native-dotenv"]
}

在.babelrc文件中。

然后，安装以下依赖项npm install metro-react-native-babel-preset --save-dev

Answer 6

这里的这些答案以及React Native Expo Environment Variables没有任何结果，但我发现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. 在您的组件中，使用 as alert(REST_API_KEY);

当然，使用alert ，这是一个虚拟示例:)