Skip to content

Latest commit

 

History

History
304 lines (229 loc) · 6.38 KB

react-native-dotenv.md

File metadata and controls

304 lines (229 loc) · 6.38 KB

模板版本：v0.2.2

react-native-dotenv

Supported platforms License

[!TIP] Github 地址

安装与使用

进入到工程目录并输入以下命令：

npm

 npm install -D react-native-dotenv@3.4.9

yarn

yarn add -D react-native-dotenv@3.4.9

下面的代码展示了这个库的基本使用场景：

[!WARNING] 使用时 import 的库名不变。

import {API_URL, API_TOKEN} from '@env';
import {View, Text} from 'react-native';
import {useState, useEffect} from 'react';

export function TestDotenv() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(`${API_URL}/product/mirrors.html`, {
      headers: {
        Authorization: `Bearer ${API_TOKEN}`,
      },
    })
      .then(res => res.json())
      .then(res => {
        console.log(res);
      });
  }, []);

  return (
    <View>
      <Text style={{color:"red",fontSize:30}}>{API_URL}</Text>
    </View>
  );
}

基础配置：

.babelrc 或 babel.config.js

{
  "plugins": [["module:react-native-dotenv"]]
}

.babelrc 或 babel.config.js

[!TIP] 如果默认值不适合您项目，这里会列出 Babel 配置的可用选项及其各自的默认值，但如果您使用默认设置，则无需添加它们。

module.exports = function(api) {
  api.cache(false)
  module.exports = {
    plugins: [
      [
        'module:react-native-dotenv',
        {
          envName: 'APP_ENV',
          moduleName: '@env',
          path: '.env',
          blocklist: null, // 黑名单 string[]
          allowlist: null, // 白名单 string[]
          blacklist: null, // DEPRECATED 弃用
          whitelist: null, // DEPRECATED 弃用
          safe: false, // 安全模式
          allowUndefined: true, // 允许变量未定义
          verbose: false, // 
        },
      ],
    ],
  };
}

.env

API_URL=https://api.example.org
API_TOKEN=abc123

安全模式

若启用安全模式，则只允许使用在 .env 文件中定义的环境变量。这将完全忽略环境中已经定义的所有内容。

.env 文件必须存在

{
  "plugins": [
    [
      "module:react-native-dotenv",
      {
        "safe": true
      }
    ]
  ]
}

允许 undefined

允许导入未定义的变量，导入的值为 undefined。

{
  "plugins": [
    [
      "module:react-native-dotenv",
      {
        "allowUndefined": true
      }
    ]
  ]
}

In users.js

import { UNDEFINED_VAR } from "@env";

console.log(UNDEFINED_VAR === undefined); // true

当设置为 false 时，将抛出错误。

覆写 envName

请查看 官方说明

多环境 (Multi-env)

该三方库现在支持读取特定环境的变量。这意味着可以从多个文件中导入环境变量，例如 .env, .env.development, .env.Production 和 .env.test。这是基于 dotenv-flow 实现的。

若要进行选择，需要为每个环境使用 NODE_ENV 设置脚本

module.exports = function(api) {
  api.cache(false)
  module.exports = {
    plugins: [
      [
        'module:react-native-dotenv',
        {
          moduleName: '@env',
          // 多环境须修改 path：'.env.development' 或 '.env.Production' 或 '.env.test'
          path: '.env', 
        },
      ],
    ],
  };
}

package.json

windows

{
  "scripts": {
    "start:development": "set NODE_ENV=development&& npx react-native start",
    "start:production": "set NODE_ENV=production&& npx react-native start"
  }
}

iOS & Linux

{
  "scripts": {
    "start:development": "NODE_ENV=development npx react-native start",
    "start:production": "NODE_ENV=production npx react-native start"
  }
}

TypeScript

对于使用 TypeScript 的库，需要手动指定类型：

  • 在你的工程创建 types 文件夹
  • 进入文件夹，创建 *.d.ts 文件，比如 env.d.ts
  • 在此文件中，以下面的形式声明一个 module
declare module "@env" {
  export const API_BASE: string;
}

把所有你的 .env 的变量加入这个 module 内。

最后，在 tsconfig.json 文件中添加 typeRoots 字段

{
...
  "compilerOptions": {
    ...
      "typeRoots": ["./src/types"],
    ...
  }
...
}

缓存

[!WARNING] 请务必查看这一小节

已知问题：在 Android 和 HarmonyOS 里，均会出现因为缓存导致的环境变量无法更新的问题，所以需要添加一些配置，让每次打包的时候清空缓存，以达到能读取新的环境变量的效果。

首先确保以下依赖已经配置到你的 package.json 内

"resolutions": {
  "@babel/core": "^7.20.2",
  "babel-loader": "^8.3.0"
}

在 babel config 中添加 api.cache(false)，例如

// .babel.config.js
module.exports = function (api) {
  api.cache(false);
  return {
    presets: ["module:metro-react-native-babel-preset"],
    plugins: [["module:react-native-dotenv"]],
  };
};

在 metro.config.js 中添加 resetCache: true，例如

// metro.config.js
module.exports = {
  resetCache:true,
  ...
}

更多清除缓存的方法请参考 react-naitve-dotenv 官方指引

约束与限制

兼容性

本文档内容基于以下版本验证通过：

  1. RNOH：0.72.27; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.1.430; ROM：3.0.0.26;
  2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;

遗留问题

其他

开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。