我正在使用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: '',
当前回答
[来源]从我的发现来看,默认情况下,它只可能做生产和开发配置(没有登台或其他环境)-对吗?
现在,我一直在使用一个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
其他回答
如果你正在使用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”。我希望这对你有用。要了解更多信息,请阅读本文。
可以使用process.env.blabla而不是process.env['blabla']访问变量。我最近让它工作,并评论了我是如何在GitHub上的一个问题上做到这一点的,因为我有一些基于公认答案的缓存问题。问题是这样的。
你也可以有不同的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;
用于设置环境变量的具体方法将因您使用的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