React Native Expo 环境变量

Posted 2023-03-04

【中文标题】React Native Expo 环境变量

【英文标题】：React Native Expo Environment Variables

【发布时间】：2020-02-04 18:41:49

【问题描述】：

所以我对本文和其他文章中解释的环境变量的概念感到满意 https://www.freecodecamp.org/news/how-to-gracefully-use-environment-variables-in-a-react-native-app/

太好了，我的 SOMETHING="something" 已存储，因此我可以使用 env.SOMETHING 或其他任何东西

我有点迷失的部分是你保存实时变量的地方？

我宁愿不做这样的解决方案，因为您似乎仍然保持您的密钥相当公开，并且您只是根据 if 语句的环境进行选择

Manage environment with expo react native

例如，对于我们拥有的 Express App 部署，我们指定

let endPointURL = env.endPointURL

然后我们在本地保留该变量的版本，当它与 AWS 一起使用时，它会被 AWS 服务器覆盖，如 here 所解释的那样

我只是想知道 android 和 ios 版本（在各自的商店中）或通过 Expo 是否存在类似的东西？

谢谢大家

【参考方案1】：

老实说，我认为他们的做法有点愚蠢。可能有比这更好的方法，但我认为我遵循了他们的文档建议。

https://docs.expo.io/versions/latest/distribution/release-channels/#using-release-channels-for-environment-variable-configuration

他们有一个代码 sn-p 建议您创建一个函数来查看发布配置本身。

我的解释是，您可能会执行以下代码之类的操作，并将您的环境变量存储在 variables.js 文件中，然后像这样拉入您的环境变量。

import Constants from 'expo-constants';

export const prodUrl = "https://someapp.herokuapp.com";

const ENV = 
  dev: 
    apiUrl: "http://localhost:3000"
  ,
  staging: 
    apiUrl: prodUrl
  ,
  prod: 
    apiUrl: prodUrl
  
;

function getEnvVars(env = "") 
  if (env === null || env === undefined || env === "") return ENV.dev;
  if (env.indexOf("dev") !== -1) return ENV.dev;
  if (env.indexOf("staging") !== -1) return ENV.staging;
  if (env.indexOf("prod") !== -1) return ENV.prod;


export default getEnvVars(Constants.manifest.releaseChannel);

编辑：

现在 Expo 支持配置文件为app.config.js 或app.config.ts，我们可以使用dotenv。检查这个：https://docs.expo.io/guides/environment-variables/#using-a-dotenv-file

【讨论】：

在（长时间！）深入了解如何完成之后，我将选择您的答案@Caleb。可惜没有更简单的机制！我最终保留了两个文件夹——一个用于 live，一个用于 dev，另一个文件夹用于 env 变量，我只是 git push 和 pull 以使源代码保持最新。非常愚蠢地说它有效！ :'D

我宁愿希望我被证明是错误的。那好吧。大多数答案都是“刚刚下车博览会”

@AshHogarth 的另一种解决方案可能是将两个配置文件夹保存在一个存储库中，并有一个文件在需要时在它们之间切换。将此文件添加到.gitignore 并在每次构建时生成它。例如。 config.now.js 仅包含 module.exports = require('./config.staging/index.js')

我正在尝试，我可以说它效果不佳，expo web 可以获取新的 env，但 android 和 ios 应用程序卡在一个我什至无法更改的地方。跨度>

【参考方案2】：

更简单的方法是导出 env 对象而不是函数：

import Constants from 'expo-constants';
import  Platform  from "react-native";

const localhost =
 Platform.OS === "ios" ? "localhost:8080" : "10.0.2.2:8080";


const ENV = 
    dev: 
      apiUrl: localhost,
      amplitudeApiKey: null,
    ,
    staging: 
      apiUrl: "[your.staging.api.here]",
      amplitudeApiKey: "[Enter your key here]",
      // Add other keys you want here
    ,
    prod: 
      apiUrl: "[your.production.api.here]",
      amplitudeApiKey: "[Enter your key here]",
      // Add other keys you want here
    
;

const getEnvVars = (env = Constants.manifest.releaseChannel) => 
  if (env === null || env === undefined || env === "" || env.indexOf("dev") !== -1) return ENV.dev;
  if (env.indexOf("staging") !== -1) return ENV.staging;
  if (env.indexOf("prod") !== -1) return ENV.prod;


const selectedENV = getEnvVars();

export default selectedENV;

// Import
import env from '..xxx/utility/env';

【讨论】：

您的解决方案与接受的答案相同，只是您中断了方法调用。接受的答案没有返回函数。它会像您的答案一样返回函数的结果。