与其硬编码你的应用常量并在环境上进行切换(我将在稍后解释如何做到这一点)，我建议使用12因素建议，让你的构建过程定义你的BASE_URL和API_KEY。

要回答如何将您的环境暴露为react-native，我建议使用Babel的Babel -plug -transform-inline-environment-variables。

为了让它工作，你需要下载这个插件，然后你需要设置一个.babelrc，它应该看起来像这样:

{
  "presets": ["react-native"],
  "plugins": [
    "transform-inline-environment-variables"
  ]
}

因此，如果你通过运行API_KEY=my-app-id react-native bundle(或start, run-ios，或run-android)来编译你的react-native代码，那么你所要做的就是让你的代码看起来像这样:

const apiKey = process.env['API_KEY'];

然后巴别塔会用:

const apiKey = 'my-app-id';

如果你正在使用expo(managed workflow)开发你的应用程序，你必须在你的项目的根目录中创建一个名为app.config.js的文件，并将以下代码添加到文件中:

const myValue = "My App";

export default () => {
    if (process.env.MY_ENVIRONMENT === "development") {
        return {
            name: myValue,
            version: "1.0.0",
            // All values in extra will be passed to your app.
            extra: {
                fact: "dogs are cool"
            }
        };
    } else {
        return {
            name: myValue,
            version: "1.0.0",
            // All values in extra will be passed to your app.
            extra: {
                fact: "kittens are cool"
            }
        };
    }
};

然后你应该使用下面的命令启动/发布你的应用程序(这在Windows中也适用)。对于其他操作系统，请阅读我在最后提到的文章)。

npx cross-env MY_ENVIRONMENT=开发博览会启动/发布

这将使用上面提到的环境变量(MY_ENVIRONMENT)启动或发布应用程序。应用程序将根据环境变量加载适当的配置。现在可以通过将名为exo -constants的模块导入到项目文件中，从配置中访问变量extra。例如:

import Constants from "expo-constants";

export default function App() {
    console.log(Constants.manifest.extra.fact);
    return (
        <>
            <View>
                <Text>Dummy</Text>
            </View>
        </>
    );
}

使用常数。Manifest我们可以额外访问里面的对象。因此，如果您的环境变量是development，这段代码应该console.log“dogs are cool”。我希望这对你有用。要了解更多信息，请阅读本文。

[来源]从我的发现来看，默认情况下，它只可能做生产和开发配置(没有登台或其他环境)-对吗?

现在，我一直在使用一个environment.js文件，可以用来检测博览会发布通道，并根据此更改返回的变量，但对于构建，我需要更新返回的非DEV变量为staging或prod:

import { Constants } from 'expo';
import { Platform } from 'react-native';
const localhost = Platform.OS === 'ios' ? 'http://localhost:4000/' : 'http://10.0.2.2:4000/';
const ENV = {
  dev: {
    apiUrl: localhost,
  },
  staging: {
    apiUrl: 'https://your-staging-api-url-here.com/'
  },
  prod: {
    apiUrl: 'https://your-prod-api-url-here.com/'
  },
}
const getEnvVars = (env = Constants.manifest.releaseChannel) => {
  // What is __DEV__ ?
  // This variable is set to true when react-native is running in Dev mode.
  // __DEV__ is true when run locally, but false when published.
  if (__DEV__) {
    return ENV.dev;
  } else {
    // When publishing to production, change this to `ENV.prod` before running an `expo build`
    return ENV.staging;
  }
}
export default getEnvVars;

选择

谁有在用expo构建的项目中使用react-native-dotenv的经验?我很想听听你的想法

https://github.com/goatandsheep/react-native-dotenv

在我看来，最好的选择是使用react-native-config。 支持12因子。

我发现这个包非常有用。您可以设置多个环境，例如开发、登台、生产。

在Android的情况下，变量也可以在Java类，gradle, AndroidManifest.xml等。 在iOS中，变量也可以在Obj-C类，Info.plist中使用。

你只需要创建文件

.env.development .env.staging .env.production

你用键和值填充这些文件，比如

API_URL=https://myapi.com
GOOGLE_MAPS_API_KEY=abcdefgh

然后使用它:

import Config from 'react-native-config'

Config.API_URL  // 'https://myapi.com'
Config.GOOGLE_MAPS_API_KEY  // 'abcdefgh'

如果你想使用不同的环境，你基本上像这样设置ENVFILE变量:

ENVFILE=.env.staging react-native run-android

或者为生产组装应用程序(在我的情况下是android):

cd android && ENVFILE=.env.production ./gradlew assembleRelease

不要传递像VAR=value react-native run-android或VAR=value react-native run-ios这样的变量。这些变量只有当我们在开始命令中传递它们时才可以访问，即VAR=value react-native start——reset-cache。

你可以通过3个简单的步骤来实现这一点:-

通过运行npm i babel-plugin-transform-inline-environment-variables——save-dev安装babel-plugin-transform-inline-environment-variables。 在.bablerc或babel.config.js中添加"plugins": ["transform-inline-environment-variables"] 在启动metro bundle时传递变量，即VAR=value react-native start -reset-cache，不要在react-native run-android或react-native run-ios命令中传递这些变量。

请记住，使用——reset-cache标志是必需的，否则变量的变化将不会被应用。

可以使用process.env.blabla而不是process.env['blabla']访问变量。我最近让它工作，并评论了我是如何在GitHub上的一个问题上做到这一点的，因为我有一些基于公认答案的缓存问题。问题是这样的。