我正在使用react-native来构建一个跨平台的应用程序,但我不知道如何设置环境变量,以便我可以有不同的常量为不同的环境。
例子:
development:
BASE_URL: '',
API_KEY: '',
staging:
BASE_URL: '',
API_KEY: '',
production:
BASE_URL: '',
API_KEY: '',
我正在使用react-native来构建一个跨平台的应用程序,但我不知道如何设置环境变量,以便我可以有不同的常量为不同的环境。
例子:
development:
BASE_URL: '',
API_KEY: '',
staging:
BASE_URL: '',
API_KEY: '',
production:
BASE_URL: '',
API_KEY: '',
当前回答
用于设置环境变量的具体方法将因您使用的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)管理文件的编写方式,以更好地控制在构建时如何生成配置。
其他回答
我使用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否则将不能正确转换。
对于最新的RN版本,您可以使用这个本机模块:https://github.com/luggit/react-native-config
[来源]从我的发现来看,默认情况下,它只可能做生产和开发配置(没有登台或其他环境)-对吗?
现在,我一直在使用一个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
嗨,如果你正面临这个问题,试试这个,这对我有用,以后谢谢我
在bable.js
plugins: [
[
"module:react-native-dotenv",
{
moduleName: "react-native-dotenv",
},
],
],
use
import { YOURAPIKEY } from "react-native-dotenv";
inseted of
import { YOURAPIKEY } from "@env";
遵循以下步骤
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'];
欢呼:)