From f58a5d1032a76d13eb52a63cc5d40f4420250795 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=B4=8B?= <251448644@qq.com>
Date: Fri, 12 Jan 2024 16:32:43 +0800
Subject: [PATCH 1/3] =?UTF-8?q?[Issues:=20#I8VPEN]=20=E6=B7=BB=E5=8A=A0rea?=
=?UTF-8?q?ct-native-dotenv=E6=96=87=E6=A1=A3=E5=88=B01224?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
1224/react-native-dotenv.md | 140 ++++++++++++++++++++++++++++++++++++
1 file changed, 140 insertions(+)
create mode 100644 1224/react-native-dotenv.md
diff --git a/1224/react-native-dotenv.md b/1224/react-native-dotenv.md
new file mode 100644
index 00000000..8b5d654c
--- /dev/null
+++ b/1224/react-native-dotenv.md
@@ -0,0 +1,140 @@
+> 模板版本：v0.1.2
+
+
+
react-native-dotenv
+
+
+
+ 
+
+
+ 
+
+
+
+>[!tip] [Github 地址](https://github.com/goatandsheep/react-native-dotenv)
+
+
+## 安装与使用
+
+进入到工程目录并输入以下命令：
+
+#### **yarn**
+
+```bash
+yarn add -D react-native-dotenv@^3.4.9
+```
+
+
+#### **npm**
+
+```bash
+ npm install -D react-native-dotenv@^3.4.9
+```
+
+
+
+下面的代码展示了这个库的基本使用场景：
+
+```js
+1.配置babel.config.js文件如下：
+ module.exports=function(api){
+ api.cache(false);
+ return{
+ presets:['module:metro-react-native-babel-preset'],
+ plugins:[
+ ["module:react-native-dotenv"]
+ ]
+ }
+ }
+
+2.在根目录下新建.env文件，并配置如下代码：
+ API_URL=env.url
+ API_TOKEN=env.token
+ 在根目录下新建.env.dev文件，配置如下代码：
+ API_URL=dev.url
+ API_TOKEN=dev.token
+ 在根目录下新建.env.test文件，配置如下代码：
+ API_URL=test.url
+ API_TOKEN=test.token
+
+3.根目录下新建types文件夹，在此目录下新建env.d.tsx文件，并配置如下代码：
+ daclare module '@env'{
+ export const API_URL:string,API_TOKEN:string
+ }
+
+4.将第3步的文件添加到tsconfig.json文件中，配置如下：
+ {
+ "extends":"@tsconfig/react-native/tsconfig.json",
+ "compilerOptions":{
+ "typeRoots":["./types"]
+ }
+ }
+
+5.页面中引入，代码配置如下：
+ import React from 'react';
+ import {View,Text} from 'react-native';
+ import {API_URL,API_TOKEN} from "@env"
+
+ function DotenvTest({}):JSX.Element{
+ return (
+
+ DotenvTest
+ API_URL:{API_URL}
+ API_TOKEN:{API_TOKEN}
+
+ )
+ }
+ export default DotenvTest
+
+6.在工程文件的package.json文件的"scrips"中配置如下代码：
+ "start_harmony:dev":"set NODE_ENV=dev&& npm run dev"
+ "start_harmony:test":"set NODE_ENV=test&& npm run dev"
+
+7.在metro.config.js文件中修改为以下代码：
+ const config={
+ resetCache:true,
+ transformer:{
+ getTransformOptions:async()=>({
+ transform:{
+ experimentalImportSupport:false,
+ inlineRequires:true
+ }
+ })
+ }
+ }
+
+8.单环境：执行npm run dev指令，生成bundle后运行鸿蒙侧，启动页面，观察页面读取到.env文件中的变量值
+ 多环境：分别执行npm run start_harmony:dev 或者npm run start_harmony:test命令，生成bundle后运行鸿蒙侧，启动页面，观察页面读取到.env.dev和.env.test文件中的变量值
+
+
+```
+
+## 约束与限制
+
+### 兼容性
+
+ 在下述版本验证通过：
+
+ 1. IDE：DevEco Studio 4.1.3.412;SDK：OpenHarmony(api11) 4.1.0.53;测试设备：Mate40 Pro(NOH-AN00);ROM：2.0.0.52(SP22C00E52R1P17log);RNOH：0.72.11
+
+## 使用场景
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+详情见 [react-native-dotenv源库地址](https://github.com/goatandsheep/react-native-dotenv)
+
+| Name | Description | Platform | HarmonyOS Support |
+| ---- | ---- | ---- | -------- |
+| Single-env | 单环境使用场景 |All | yes |
+| Multi-env | 多环境使用场景 | All | yes |
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/goatandsheep/react-native-dotenv/blob/main/LICENSE) ，请自由地享受和参与开源。
--
Gitee
From 586803e58e92fa468eece0ee9eb83f8f462af058 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=B4=8B?= <251448644@qq.com>
Date: Fri, 12 Jan 2024 16:38:18 +0800
Subject: [PATCH 2/3] =?UTF-8?q?[Issues:=20#I8VPEN]=20=E6=B7=BB=E5=8A=A0rea?=
=?UTF-8?q?ct-native-dotenv=E6=96=87=E6=A1=A3=E5=88=B01224?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
1224/react-native-dotenv.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/1224/react-native-dotenv.md b/1224/react-native-dotenv.md
index 8b5d654c..d021e608 100644
--- a/1224/react-native-dotenv.md
+++ b/1224/react-native-dotenv.md
@@ -5,7 +5,7 @@
-
+ 
--
Gitee
From a17c8e25f734a43c10a1636f40254cacd3a8dcf5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=B4=8B?= <251448644@qq.com>
Date: Fri, 12 Jan 2024 18:22:36 +0800
Subject: [PATCH 3/3] =?UTF-8?q?[Issues:=20#I8VPEN]=20=E6=B7=BB=E5=8A=A0rea?=
=?UTF-8?q?ct-native-dotenv=E6=96=87=E6=A1=A3=E5=88=B01224?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
1224/react-native-dotenv.md | 158 ++++++++++++++++++++----------------
1 file changed, 88 insertions(+), 70 deletions(-)
diff --git a/1224/react-native-dotenv.md b/1224/react-native-dotenv.md
index d021e608..40c4a52e 100644
--- a/1224/react-native-dotenv.md
+++ b/1224/react-native-dotenv.md
@@ -37,77 +37,95 @@ yarn add -D react-native-dotenv@^3.4.9
下面的代码展示了这个库的基本使用场景：
```js
-1.配置babel.config.js文件如下：
- module.exports=function(api){
- api.cache(false);
- return{
- presets:['module:metro-react-native-babel-preset'],
- plugins:[
- ["module:react-native-dotenv"]
- ]
- }
+.babel.config.js：
+Basic setup:
+module.exports=function(api){
+ api.cache(false); //解决缓存导致无法更新变量读取问题
+ return{
+ presets:['module:metro-react-native-babel-preset'],
+ plugins:[
+ ["module:react-native-dotenv"]
+ ]
}
-
-2.在根目录下新建.env文件，并配置如下代码：
- API_URL=env.url
- API_TOKEN=env.token
- 在根目录下新建.env.dev文件，配置如下代码：
- API_URL=dev.url
- API_TOKEN=dev.token
- 在根目录下新建.env.test文件，配置如下代码：
- API_URL=test.url
- API_TOKEN=test.token
-
-3.根目录下新建types文件夹，在此目录下新建env.d.tsx文件，并配置如下代码：
- daclare module '@env'{
- export const API_URL:string,API_TOKEN:string
- }
-
-4.将第3步的文件添加到tsconfig.json文件中，配置如下：
- {
- "extends":"@tsconfig/react-native/tsconfig.json",
- "compilerOptions":{
- "typeRoots":["./types"]
- }
- }
-
-5.页面中引入，代码配置如下：
- import React from 'react';
- import {View,Text} from 'react-native';
- import {API_URL,API_TOKEN} from "@env"
-
- function DotenvTest({}):JSX.Element{
- return (
-
- DotenvTest
- API_URL:{API_URL}
- API_TOKEN:{API_TOKEN}
-
- )
- }
- export default DotenvTest
-
-6.在工程文件的package.json文件的"scrips"中配置如下代码：
- "start_harmony:dev":"set NODE_ENV=dev&& npm run dev"
- "start_harmony:test":"set NODE_ENV=test&& npm run dev"
-
-7.在metro.config.js文件中修改为以下代码：
- const config={
- resetCache:true,
- transformer:{
- getTransformOptions:async()=>({
- transform:{
- experimentalImportSupport:false,
- inlineRequires:true
- }
- })
- }
- }
-
-8.单环境：执行npm run dev指令，生成bundle后运行鸿蒙侧，启动页面，观察页面读取到.env文件中的变量值
- 多环境：分别执行npm run start_harmony:dev 或者npm run start_harmony:test命令，生成bundle后运行鸿蒙侧，启动页面，观察页面读取到.env.dev和.env.test文件中的变量值
-
-
+}
+
+If the defaults do not cut it for your project, this outlines the available options for your Babel configuration and their respective default values, but you do not need to add them if you are using the default settings.
+
+{
+ "plugins": [
+ ["module:react-native-dotenv", {
+ "envName": "MY_ENV",
+ "moduleName": "@env",
+ "path": ".env",
+ }]
+ ]
+}
+.env：
+
+API_URL=https://api.example.org
+API_TOKEN=abc123
+
+In users.js：
+
+import {API_URL, API_TOKEN} from "@env"
+
+fetch(`${API_URL}/users`, {
+ headers: {
+ 'Authorization': `Bearer ${API_TOKEN}`
+ }
+})
+
+Multi-env
+
+// package.json
+{
+ "scripts": {
+ "start_harmony:dev":"set NODE_ENV=dev&& npm run start",
+ "start_harmony:test":"set NODE_ENV=test&& npm run start"
+ }
+}
+Or
+{
+ "scripts": {
+ "start_harmony:dev":"set MY_ENV=dev&& npm run start",
+ "start_harmony:test":"set MY_ENV=test&& npm run start"
+ }
+}
+
+For the library to work with TypeScript, you must manually specify the types for the module.
+
+Create a types folder in your project
+Inside that folder, create a *.d.tsxfile, say, env.d.tsx
+in that file, declare a module as the following format:
+
+declare module '@env' {
+ export const API_URL: string,API_TOKEN:string;
+}
+Add all of your .env variables inside this module.
+
+Finally, add this folder into the typeRoots field in your tsconfig.json file:
+{
+...
+ "compilerOptions": {
+ ...
+ "typeRoots": ["./src/types"],
+ ...
+ }
+...
+}
+
+
+Cacheing
+
+When using with babel-loader with caching enabled you will run into issues where environment changes won’t be picked up. This is due to the fact that babel-loader computes a cacheIdentifier that does not take your .env file(s) into account. The good news is that a recent update has fixed this problem as long as you're using a new version of Babel. Many react native libraries have not updated their Babel version yet so to force the version, add in your package.json:
+
+"resolutions": {
+ "@babel/core": "^7.20.2",
+ "babel-loader": "^8.3.0"
+}
+If this does not work, you should set api.cache(false) in your babel config
+
+metro.config.js : resetCache: true //解决缓存导致无法更新变量读取问题
```
## 约束与限制
--
Gitee