代码之家  ›  专栏  ›  技术社区  ›  Simon

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

  •  1
  • Simon  · 技术社区  · 6 年前

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

    我想使用一个.env.local文件,我唯一发现的是使用babel插件内联dotenv,但是它加载.env文件的内容而不是.env.local文件(如果文件存在,我希望它加载.env.local的内容)。

    有没有其他类似的插件允许这样做?

    1 回复  |  直到 6 年前
        1
  •  5
  •   Pedram Vdl    5 年前

    相反,您可以使用Expo“extra”配置属性。在app.json中的expo add下,让我们说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
        2
  •  2
  •   Simon    5 年前

    添加一个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;
    

    然后可以将env变量放入文件中 envLocal.js 这样地: 测试:“localhost”

    以及你的产品变量 app.json 文件,如下所示:

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

    最后你可以这样称呼它:

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