react-native 设置环境变量- react-native-dotenv

xieyanmei

场景

有时候我们需要设置一些环境变量,这里有很多方式。例如:通过特定的标识判断当前是什么环境,再动态读取对应的变量。那么如何通过编译命令设置环境变量呢?我们可以了解一下 react-native-dotenv

实现方式

1.安装react-native-dotenv

npm install react-native-dotenv

2.在你的.babelrc(如果没有新建一个)文件中配置一下设置

简单配置,都使用默认参数
{
  "plugins": [
    ["module:react-native-dotenv"]
  ]
}
定制配置,自定义
{
  "plugins": [
    ["module:react-native-dotenv", {
      "envName": "APP_ENV",
      "moduleName": "@env",
      "path": ".env",
      "blocklist": null,
      "allowlist": null,
      "blacklist": null, // DEPRECATED
      "whitelist": null, // DEPRECATED
      "safe": false,
      "allowUndefined": true,
      "verbose": false
    }]
  ]
}

3.在项目根目录下新建.env文件,里面可以配置需要的变量,使用key=value的形式

eg:

APP_TRYPE = ZZZ
APP_NAME = AAA

4.使用

import {APP_TRYPE, APP_NAME} from "@env"

console.log('APP_TRYPE:',APP_TRYPE)
输出:APP_TRYPE:ZZZ
console.log('APP_NAME',APP_NAME)
输出:APP_NAME:AAA

如果有多种配置,如果在编译的时候指定使用哪个呢?

1.设置package.json

// package.json
{
  "scripts": {
    "start:wx": "MY_ENV=wx npx react-native start",
    "start:ali": "MY_ENV=ali npx react-native start",
  }
}

2.定义envName

为了能使用上面的MY_ENV,需要我们重新定义envName

{
  "plugins": [
    ["module:react-native-dotenv", {
     "envName": "MY_ENV" //这里需要设置为上面package.json对应的
    }]
  ]
}

运行package.json的命令的时候,读取的环境变量文件就是.env.ali,.env.wx

新建.env.wx和 .env.ali文件

.env.wx

APP_TRYPE = wx
APP_NAME = mywx

.env.ali

APP_TRYPE = ali
APP_NAME = myali

使用

运行 npm run start:wx

import {APP_TRYPE, APP_NAME} from "@env"

console.log('APP_TRYPE:',APP_TRYPE)
输出:APP_TRYPE:wx
console.log('APP_NAME',APP_NAME)
输出:APP_NAME:mywx

运行 npm run start:ali

import {APP_TRYPE, APP_NAME} from "@env"

console.log('APP_TRYPE:',APP_TRYPE)
输出:APP_TRYPE:ali
console.log('APP_NAME',APP_NAME)
输出:APP_NAME:myali

到这里,我们已经可以通过不同的命令来指定不同的变量

阅读 344

前端笔记
记录遇到的问题和解决方案,记录技术成长和技术感悟,在分享中共同成长
44 声望
4 粉丝
0 条评论
44 声望
4 粉丝
文章目录
宣传栏