React Native with Expo:如何使用.env.local配置文件?

时间:2018-09-27 23:11:30

标签: react-native environment-variables local expo

我有一个运行expo的react-native应用程序(expo 27.1.1和react-native 0.55.4)。

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

还有其他类似的插件允许吗?

2 个答案:

答案 0 :(得分:3)

您好,您可以使用Expo“额外”配置属性。在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

答案 1 :(得分:0)

我终于找到了解决方法:

添加带有以下内容的文件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中,如下所示: 导出默认值{   测试:“本地主机” };

app.json文件中的prod变量,如下所示:

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

最后,您可以这样称呼它:

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