我发现最简单(不是最好或最理想)的解决方案是使用react-native-dotenv。你只需在你的.babelrc文件的根目录下添加"react-native-dotenv"预设，如下所示:

{
  "presets": ["react-native", "react-native-dotenv"]
}

创建一个.env文件并添加属性:

echo "SOMETHING=anything" > .env

然后在你的项目(JS):

import { SOMETHING } from 'react-native-dotenv'
console.log(SOMETHING) // "anything"

为了解决这个问题，我使用了react-native中内置的__DEV__ polyfill。只要您不是为生产构建react native，它就会自动设置为true。

例如:

//vars.js

let url, publicKey;
if (__DEV__) {
  url = ...
  publicKey = ...
} else {
  url = ...
  publicKey = ...
}

export {url, publicKey}

然后只需导入{url}从'../vars'，你总是会得到正确的。不幸的是，如果你想要两个以上的环境，这就行不通了，但它很简单，而且不需要向你的项目添加更多的依赖项。

@chapinkapa的回答很好。由于Mobile Center不支持环境变量，我采取的一种方法是通过本地模块公开构建配置:

在android上:

   @Override
    public Map<String, Object> getConstants() {
        final Map<String, Object> constants = new HashMap<>();
        String buildConfig = BuildConfig.BUILD_TYPE.toLowerCase();
        constants.put("ENVIRONMENT", buildConfig);
        return constants;
    } 

或者在ios上:

  override func constantsToExport() -> [String: Any]! {
    // debug/ staging / release
    // on android, I can tell the build config used, but here I use bundle name
    let STAGING = "staging"
    let DEBUG = "debug"

    var environment = "release"
    if let bundleIdentifier: String = Bundle.main.bundleIdentifier {
      if (bundleIdentifier.lowercased().hasSuffix(STAGING)) {
        environment = STAGING
      } else if (bundleIdentifier.lowercased().hasSuffix(DEBUG)){
        environment = DEBUG
      }
    }

    return ["ENVIRONMENT": environment]
  }

您可以同步读取构建配置，并在Javascript中决定如何执行。

在我看来，最好的选择是使用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

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

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

遵循以下步骤

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'];

欢呼:)