如何将环境变量添加到app.json文件

Question

app.json我的里面有一个文件Expo文件。在此文件中，我有两个 API 密钥（下面标记为 API_KEY），我想通过环境变量隐藏它们。

如何使用环境变量而不是对 API 密钥进行硬编码？

应用程序.json

{
  "expo": {
    "name": "Closeout",
    "slug": "Closeout",
    "version": "1.0.0",
    "orientation": "portrait",
    "privacy": "hidden",
    "notification": {
      "icon": "./assets/images/notification-icon.png",
      "color": "#000000",
      "iosDisplayInForeground": true
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "icon": "./assets/images/icon.png",
      "buildNumber": "2",
      "config": {
        "googleMapsApiKey": "API_KEY"
      }
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/icon.png",
        "backgroundColor": "#000"
      },
      "versionCode": 5,
      "useNextNotificationsApi": true,
      "config": {
        "googleMaps": {
          "apiKey": "API_KEY"
        }
      },
      "googleServicesFile": "./google-services.json"
    }
  }
}

Answer 1

我猜你现在可能已经找到了解决方案或尝试了其他方法。不过，这是这个问题的解决方案，我希望它可以帮助任何面临同样挑战的人。这是来自我正在实现的打字稿环境。

创建一个覆盖 app.json 文件内容的 app.config.ts 文件

import { ExpoConfig, ConfigContext } from '@expo/config';
import * as dotenv from 'dotenv';

// initialize dotenv
dotenv.config();

export default ({ config }: ConfigContext): ExpoConfig => ({
  ...config,
  slug: 'my-app',
  name: 'My App',
  ios: {
    supportsTablet: true,
    bundleIdentifier: 'com.croon',
    config: {
      googleMapsApiKey: process.env.GOOGLE_CLOUD_API_KEY,
    },
  },
  android: {
    adaptiveIcon: {
      foregroundImage: './assets/adaptive-icon.png',
      backgroundColor: '#FFFFFF',
    },
    package: 'com.croon',
    config: {
      googleMaps: {
        apiKey: process.env.GOOGLE_CLOUD_API_KEY,
      },
    },
  },
});

然后，您可以将 app.json 文件中的 API 条目留空。

{
  "expo": {
    "name": "Closeout",
    "slug": "Closeout",
    "version": "1.0.0",
    "orientation": "portrait",
    "privacy": "hidden",
    "notification": {
      "icon": "./assets/images/notification-icon.png",
      "color": "#000000",
      "iosDisplayInForeground": true
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "icon": "./assets/images/icon.png",
      "buildNumber": "2",
      "config": {
        "googleMapsApiKey": ""
      }
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/icon.png",
        "backgroundColor": "#000"
      },
      "versionCode": 5,
      "useNextNotificationsApi": true,
      "config": {
        "googleMaps": {
          "apiKey": ""
        }
      },
      "googleServicesFile": "./google-services.json"
    }
  }
}

记得安装所需的依赖项

干杯!