如何使用eas Secret中的环境变量构建React Native Expo应用程序？

Question

我有一个 .env 文件：

REACT_APP_URL={value}
REACT_APP_API_URL={value}
REACT_APP_VEHICLE_IMAGE_URL={value}
REACT_APP_NAME={value}
REACT_APP_GA_TRACKING_ID={value}
REACT_APP_WEBSITE_URL={value}

这是我当前的文件

eas.json

:

{
  "cli": {
    "version": ">= 10.0.2"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "ios": {
        "simulator": true
      }
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {}
  },
  "submit": {
    "production": {}
  }
}

我已通过运行以下命令将这些值存储在 eas Secret 中：

eas secret:push --scope project --env-file .env

我在 env 上存储了一些秘密，但问题是当我运行应用程序时，env 值未存储在构建中

当我跑步时

eas build --platform android --non-interactive --no-wait

我明白了：

Loaded "env" configuration for the "production" profile: no environment variables specified

我如何从我添加的 eas 秘密加载环境，以便在构建时我可以使用这些变量运行应用程序？

Answer 1

Expo环境变量

实际上，您的

.env

文件应包含如下变量：

EXPO_PUBLIC_API_URL=https://staging.example.com
EXPO_PUBLIC_API_KEY=abc123

在代码中，您可以使用如下变量：

import { Button } from 'react-native';

function Post() {
  const apiUrl = process.env.EXPO_PUBLIC_API_URL;

  async function onPress() {
    await fetch(apiUrl, { ... })
  }

  return <Button onPress={onPress} title="Post" />;
}

有关使用 Expo 环境变量的更多信息，您可以阅读此链接。

提示：使用确切的短语

process.env.EXPO_PUBLIC_XXX

从

.env

文件中获取变量。

_XXX

是您的自定义名称。

---

EAS 构建

要获得正确的 EAS 构建，您应该编写如下所示的

eas.json

文件：

{
  "build": {
    "development": {
      "env": {
        "EXPO_PUBLIC_API_URL": "https://api.development.com"
      }
    },
    "production": {
      "env": {
        "EXPO_PUBLIC_API_URL": "https://api.production.com"
      }
    },
    "test": {
      "env": {
        "EXPO_PUBLIC_API_URL": "https://api.test.com"
      }
    }
  }
}

要更好地了解 EAS Build 配置，您可以查看此链接。