如何在expo项目中读取EAS构建秘密和环境变量。变得未定义？

Question

这是我在 Sample-Expo-Project 中的代码。我无法使用 process.env 以及 EAS Secrets 中添加环境变量。我已在 EAS 中添加了机密，但在构建时无法读取。在这两种情况下我都变得不确定。请指出我做错的地方，我已经尝试了很多天了。

应用程序.js

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";

export default function App() {
  console.log(process.env); // Getting {"NODE_ENV": "development"}
  console.log(process.env.HELLO); // Getting undefined

  return (
    <View style={styles.container}>
      <Text>From Env {process.env?.HELLO}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

巴别塔配置

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["transform-inline-environment-variables"],
  };
};

环境文件

HELLO=HelloEveryone

包.json

{
  "name": "sample-expo-app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "~48.0.15",
    "expo-status-bar": "~1.4.4",
    "react": "18.2.0",
    "react-native": "0.71.7"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "babel-plugin-transform-inline-environment-variables": "^0.4.4"
  },
  "private": true
}

Answer 1

我也在为此苦苦挣扎，这是最适合我的解决方案：

我在 .env 文件和 expo.dev 网站上的项目配置下设置了环境变量。 https://expo.dev/accounts/[您的用户名]/projects/[您的项目]/secrets

在我的编码中，我使用的是react-native-dotenv。 https://www.npmjs.com/package/react-native-dotenv

设置非常简单，并且他们有很好的文档。

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [["module:react-native-dotenv"]],
  };
};

env.d.tsx

declare module "@env" {
  export const HELLO: string;
}

App.tsx

import { HELLO } from "@env";

export default function App() {

  return (
    <View>
      <Text>From Env {HELLO}</Text>
    </View>
  );
}

如果您不使用 typescript，您可以跳过 env.d.tsx 部分。

我现在可以毫无问题地访问我的开发和 EAS 构建中的秘密。我刚刚将新版本上传到 Android 上的内部测试，它运行良好。

希望我能帮助别人。

干杯， 托马斯