我正在使用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: '',
当前回答
我使用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否则将不能正确转换。
其他回答
步骤1:像这样创建单独的组件 组件名称:pagebase.js 步骤2:在此使用代码this
export const BASE_URL = "http://192.168.10.10:4848/";
export const API_KEY = 'key_token';
步骤3:在任何组件中使用它,要使用它,首先导入这个组件,然后使用它。 导入并使用它:
import * as base from "./pagebase";
base.BASE_URL
base.API_KEY
如果你正在使用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”。我希望这对你有用。要了解更多信息,请阅读本文。
对于最新的RN版本,您可以使用这个本机模块:https://github.com/luggit/react-native-config
在我看来,最好的选择是使用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
不要传递像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标志是必需的,否则变量的变化将不会被应用。