我使用react-native-config为我的项目设置了多个环境。README文件非常清楚地解释了如何在项目中配置库。只要确保实现Android部分的额外步骤即可。

另外，在设置多个环境时，请确保在包中指定正确的启动命令。Json，基于您的系统终端。我在windows笔记本电脑中开发了Android代码，在Macbook中开发了iOS代码，所以我各自的启动命令都在包中。Json是-

"scripts": {
        "android:dev": "SET ENVFILE=.env.dev && react-native run-android",
        "android:prod": "SET ENVFILE=.env.prod && react-native run-android",
        "ios:dev": "ENVFILE=.env.dev react-native run-ios",
        "ios:prod": "ENVFILE=.env.prod react-native run-ios",
},

如果您只需要维护一个.env文件，请考虑使用 react-native-dotenv是一个较轻的选择，尽管我在为这个库设置多个.env文件时遇到了一些问题。

你也可以有不同的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;

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

例如:

//vars.js

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

export {url, publicKey}

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

我使用babel-plugin-transform-inline-environment-variables。

我所做的是将配置文件放在S3中的不同环境中。

s3://example-bucket/dev-env.sh
s3://example-bucket/prod-env.sh
s3://example-bucket/stage-env.sh

每个env文件:

FIRSTENV=FIRSTVALUE
SECONDENV=SECONDVALUE

之后，我在包中添加了一个新脚本。Json，它运行用于捆绑的脚本

if [ "$ENV" == "production" ]
then
  eval $(aws s3 cp s3://example-bucket/prod-env.sh - | sed 's/^/export /')
elif [ "$ENV" == "staging" ]
then
  eval $(aws s3 cp s3://example-bucket/stage-env.sh - | sed 's/^/export /')
else
  eval $(aws s3 cp s3://example-bucket/development-env.sh - | sed 's/^/export /')
fi

react-native start

在你的应用中，你可能会有一个配置文件，它有:

const FIRSTENV = process.env['FIRSTENV']
const SECONDENV = process.env['SECONDENV']

它将被巴别塔所取代:

const FIRSTENV = 'FIRSTVALUE'
const SECONDENV = 'SECONDVALUE'

记住你必须使用过程。env['STRING'] NOT process.env.STRING否则将不能正确转换。

不要传递像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标志是必需的，否则变量的变化将不会被应用。

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