如果你正在使用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”。我希望这对你有用。要了解更多信息，请阅读本文。

用于设置环境变量的具体方法将因您使用的CI服务、构建方法、平台和工具而异。

如果你正在使用Buddybuild for CI来构建应用程序和管理环境变量，并且你需要从JS中访问配置，创建一个带有键(空字符串值)的env.js.example用于签入源代码控制，并在构建时在后克隆步骤中使用Buddybuild生成一个env.js文件，从构建日志中隐藏文件内容，如下所示:

#!/usr/bin/env bash

ENVJS_FILE="$BUDDYBUILD_WORKSPACE/env.js"

# Echo what's happening to the build logs
echo Creating environment config file

# Create `env.js` file in project root
touch $ENVJS_FILE

# Write environment config to file, hiding from build logs
tee $ENVJS_FILE > /dev/null <<EOF
module.exports = {
  AUTH0_CLIENT_ID: '$AUTH0_CLIENT_ID',
  AUTH0_DOMAIN: '$AUTH0_DOMAIN'
}
EOF

提示:不要忘记将env.js添加到.gitignore中，这样在开发过程中配置和秘密就不会意外地检入源代码控制。

然后，您可以使用Buddybuild变量(例如buddybuild_variables)管理文件的编写方式，以更好地控制在构建时如何生成配置。

React native没有全局变量的概念。 它严格执行模块化范围，以促进组件的模块化和可重用性。

但是，有时您需要组件能够感知它们所处的环境。在这种情况下，定义一个环境模块非常简单，然后组件可以调用它来获取环境变量，例如:

environment.js

var _Environments = {
    production:  {BASE_URL: '', API_KEY: ''},
    staging:     {BASE_URL: '', API_KEY: ''},
    development: {BASE_URL: '', API_KEY: ''},
}

function getEnvironment() {
    // Insert logic here to get the current platform (e.g. staging, production, etc)
    var platform = getPlatform()

    // ...now return the correct environment
    return _Environments[platform]
}

var Environment = getEnvironment()
module.exports = Environment

my-component.js

var Environment = require('./environment.js')

...somewhere in your code...
var url = Environment.BASE_URL

这创建了一个单例环境，可以从应用范围内的任何地方访问。你必须显式地要求(…)使用环境变量的任何组件的模块，但这是一件好事。

对于最新的RN版本，您可以使用这个本机模块:https://github.com/luggit/react-native-config

嗨，如果你正面临这个问题，试试这个，这对我有用，以后谢谢我

在bable.js

 plugins: [
      [
        "module:react-native-dotenv",
        {
          moduleName: "react-native-dotenv",
        },
      ],
    ],

use

import { YOURAPIKEY } from "react-native-dotenv";


inseted  of

import { YOURAPIKEY } from "@env";

经过长时间的努力，我意识到react-native并没有正式提供这个功能。这是在babel生态系统中，所以我应该学习如何写一个babel插件…

/**
 * A simple replace text plugin in babel, such as `webpack.DefinePlugin`
 * 
 * Docs: https://github.com/jamiebuilds/babel-handbook
 */
function definePlugin({ types: t }) {
    const regExclude = /node_modules/;
    return {
        visitor: {
            Identifier(path, state) {
                const { node, parent, scope } = path;
                const { filename, opts } = state;
                const key = node.name;
                const value = opts[key];

                if (key === 'constructor' || value === undefined) { // don't replace
                    return;
                }
                if (t.isMemberExpression(parent)) { // not {"__DEV__":name}
                    return;
                }
                if (t.isObjectProperty(parent) && parent.value !== node) { // error
                    return;
                }
                if (scope.getBinding(key)) { // should in global
                    return;
                }
                if (regExclude.test(filename)) { // exclude node_modules
                    return;
                }
                switch (typeof value) {
                    case 'boolean':
                        path.replaceWith(t.booleanLiteral(value));
                        break;
                    case 'string':
                        path.replaceWith(t.stringLiteral(value));
                        break;
                    default:
                        console.warn('definePlugin only support string/boolean, so `%s` will not be replaced', key);
                        break;
                }
            },
        },
    };
}

module.exports = definePlugin;

就这样，然后你可以这样用:

module.exports = {
    presets: [],
    plugins: [
        [require('./definePlugin.js'), {
            // your environments...
            __DEV__: true,
            __URL__: 'https://example.org',
        }],
    ],
};

回答者提到的包也很棒，我也参考了metro-transform-plugins/src/inline-plugin.js。