React Native with Expo：如何使用 .env.local 配置文件？

Question

我有一个 react-native 应用运行 expo（expo 27.1.1 和 react-native 0.55.4）。

我想使用 .env.local 文件，我唯一发现的是使用 babel-plugin-inline-dotenv，但它加载的是 .env 文件的内容而不是 .env.local 文件（如果文件存在，我希望它加载 .env.local 的内容，否则为 .env）。

是否有其他类似的插件允许这样做？

Answer 1

您好，您可以使用 Expo "extra" 配置属性。在 expo 下的 app.json 中，让我们这样说 myApiKey：

{
  "expo": {
    "name": "login-app",
    "slug": "login-app",
    "privacy": "public",
    "sdkVersion": "32.0.0",
    "platforms": [
      "ios",
      "android"
    ],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "extra": {
      "myApiKey" : "1234"
    }
  }
}

并且您可以在应用程序的任何位置使用它，而无需导入任何文件。像这样使用它：

Expo.Constants.manifest.extra.myApiKey

Answer 2

我终于找到了解决办法：

添加一个文件 env.js 这样：

import Constants from "expo-constants";

function getEnvVars() {
  if (__DEV__) {
    return returnEnvVars();
  } else {
      return new Promise(resolve => {
          resolve(Constants.manifest.extra);
      });
  }
}

async function returnEnvVars() {
  return await import("envLocal.js");
}

export default getEnvVars;

然后你可以把你的环境变量放在文件 envLocal.js 中，像这样：

export default {
  test: "localhost"
};

和 app.json 文件中的 prod 变量，如下所示：

{
  "expo": {
    "extra": {
      "test": "prod"
   }
}

终于可以这样称呼了：

import getEnvVars from "../environment";
getEnvVars().then(vars => console.log(vars));

React Native with Expo：如何使用 .env.local 配置文件？

React Native with Expo: how to use a .env.local config file?

local

environment-variables

react-native

expo