经过长时间的努力，我意识到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。

用于设置环境变量的具体方法将因您使用的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)管理文件的编写方式，以更好地控制在构建时如何生成配置。

我认为像下面这样的库可以帮助您解决谜题中缺失的部分，即getPlatform()函数。

https://github.com/joeferraro/react-native-env

const EnvironmentManager = require('react-native-env');

// read an environment variable from React Native
EnvironmentManager.get('SOME_VARIABLE')
  .then(val => {
    console.log('value of SOME_VARIABLE is: ', val);

  })
  .catch(err => {
    console.error('womp womp: ', err.message);
  });

我所看到的唯一问题是，这是异步代码。有一个拉请求来支持getSync。也来看看吧。

https://github.com/joeferraro/react-native-env/pull/9

你也可以有不同的env脚本:production.env.sh development.env.sh production.env.sh

然后在开始工作时将它们来源[这只是绑定到一个别名] 所以所有的sh文件都导出了每个env变量:

export SOME_VAR=1234
export SOME_OTHER=abc

然后添加babel-plugin-transform-inline-environment-variables将允许在代码中访问它们:

export const SOME_VAR: ?string = process.env.SOME_VAR;
export const SOME_OTHER: ?string = process.env.SOME_OTHER;

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

现在，我一直在使用一个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

遵循以下步骤

NPM安装react-native-dotenv 用一些变量名设置。env文件，例如APP_NAME="my-app" 修改bable.config.js

模块。出口= { 预设:['模块:metro-react-native-babel-preset '), 插件:[ ["模块:react-native-dotenv ", { :“envName APP_ENV”, :“moduleName @env”, “路径”:“.env”, “安全”:假的, “allowUndefined”:没错, “详细”:假的 }) ］ };

重新启动所有应用程序 尝试从“@env”导入{APP_NAME}。如果这不起作用，那么执行这个const APP_NAME = process.env['APP_NAME'];

欢呼:)