我正在使用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: '',
当前回答
与其硬编码你的应用常量并在环境上进行切换(我将在稍后解释如何做到这一点),我建议使用12因素建议,让你的构建过程定义你的BASE_URL和API_KEY。
要回答如何将您的环境暴露为react-native,我建议使用Babel的Babel -plug -transform-inline-environment-variables。
为了让它工作,你需要下载这个插件,然后你需要设置一个.babelrc,它应该看起来像这样:
{
"presets": ["react-native"],
"plugins": [
"transform-inline-environment-variables"
]
}
因此,如果你通过运行API_KEY=my-app-id react-native bundle(或start, run-ios,或run-android)来编译你的react-native代码,那么你所要做的就是让你的代码看起来像这样:
const apiKey = process.env['API_KEY'];
然后巴别塔会用:
const apiKey = 'my-app-id';
其他回答
与其硬编码你的应用常量并在环境上进行切换(我将在稍后解释如何做到这一点),我建议使用12因素建议,让你的构建过程定义你的BASE_URL和API_KEY。
要回答如何将您的环境暴露为react-native,我建议使用Babel的Babel -plug -transform-inline-environment-variables。
为了让它工作,你需要下载这个插件,然后你需要设置一个.babelrc,它应该看起来像这样:
{
"presets": ["react-native"],
"plugins": [
"transform-inline-environment-variables"
]
}
因此,如果你通过运行API_KEY=my-app-id react-native bundle(或start, run-ios,或run-android)来编译你的react-native代码,那么你所要做的就是让你的代码看起来像这样:
const apiKey = process.env['API_KEY'];
然后巴别塔会用:
const apiKey = 'my-app-id';
在我看来,最好的选择是使用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
@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中决定如何执行。
我已经为相同的问题创建了一个预构建脚本,因为我需要一些不同环境的不同API端点
const fs = require('fs')
let endPoint
if (process.env.MY_ENV === 'dev') {
endPoint = 'http://my-api-dev/api/v1'
} else if (process.env.MY_ENV === 'test') {
endPoint = 'http://127.0.0.1:7001'
} else {
endPoint = 'http://my-api-pro/api/v1'
}
let template = `
export default {
API_URL: '${endPoint}',
DEVICE_FINGERPRINT: Math.random().toString(36).slice(2)
}
`
fs.writeFile('./src/constants/config.js', template, function (err) {
if (err) {
return console.log(err)
}
console.log('Configuration file has generated')
})
我已经创建了一个自定义的npm运行脚本来执行反应本机运行..
我package-json
"scripts": {
"start-ios": "node config-generator.js && react-native run-ios",
"build-ios": "node config-generator.js && react-native run-ios --configuration Release",
"start-android": "node config-generator.js && react-native run-android",
"build-android": "node config-generator.js && cd android/ && ./gradlew assembleRelease",
...
}
然后在我的服务组件中导入自动生成的文件:
import config from '../constants/config'
fetch(`${config.API_URL}/login`, params)
如果你正在使用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”。我希望这对你有用。要了解更多信息,请阅读本文。