如何使用TypeScript和RN CLI在React Native中获取.env变量?

yvt65v4c  于 2023-08-07  发布在  React
关注(0)|答案(1)|浏览(92)

我正在使用typescript和react native CLI(不是expoCLI)进行react native项目。以下是我的版本:

...
    "@types/jest": "^28.1.4",
    "@types/react": "~17.0.21",
    "@types/react-native": "0.68.0",
    "@types/react-test-renderer": "^18.0.0",
    "babel-plugin-module-resolver": "^4.1.0",
    "react": "17.0.2",
    "react-native": "0.68.2",
    "react-native-config": "^1.4.12",
    "typescript": "^4.5.2"
    "react-native-dotenv": "3.4.7",
    "@types/react-native-dotenv": "0.2.0",

字符串
我有我的.env文件,其中包含一些我想在文件中使用的环境变量。我遵循https://www.npmjs.com/package/react-native-dotenv官方文档中的步骤,并添加了typescript的步骤。
1.用插件创建一个.babelrc文件
1.添加“envName”,“moduleName”,“path”
1.我的.env文件具有以下格式API_EXAMPLE=123
1.我用declare模块'@env'创建te类型文件夹和env.d.ts文件夹
1.我在tsconfig.json文件中添加了typeRoots (如果我删除这一行,这一步会导致我的单元测试(types/jest包)出错,一切都正常,但我的env变量仍然不起作用,所以我将在稍后找到如何修复此错误)
我试了很多stackoverflow的答案。举例来说:

  • 更改'react-native-dotenv'的'@env'
  • 创建一个yarn启动--reset-cache
  • 将我的.env文件移到根目录下的类型中(这一步是重新启动IDE并执行yarn start --reset-cache)
  • 我尝试使用.babelrc和babel.config.js预置和设置
  • 当然,我会删除我的node_modules文件夹,然后重新安装所有内容

但在所有这些步骤之后,我的控制台上仍然有以下错误:
unable to resolve module '@env' from 'src/../.../../../MyFile.js: @env could not be found within the project
Error: Unable to resolve module path from node_modules/react-native-dotenv
Module ../.../node_modules_@types/react-native-dotenv has no exported member API_EXAMPLE
我错过了什么步骤吗?
还有一点需要澄清,这是我的项目的结构:

projectFolder
--.github
--docs
--myApp (this folder contain the iOS and Android folder and files for execute my components)
--src
  |--- client
      |--- config
            |--- myApiConfigs.ts // this file contain the env variable I want to get from .env file (.env file is at .gitignore)
  |--- components // all of my react native components
-- .env //.env file are on my root folder, also tried at types folder

wgx48brx

wgx48brx1#

做一些挖掘发现this blog做以下事情:
.env文件:

API_KEY=your_api_key_here

字符串
env.d.ts文件:

declare module '@env' {
  export const API_KEY: string;
}


您的组件文件:

import { API_KEY } from '@env';


但是对于该方法,必须将每个变量添加到env类型文件中。
希望这对你有帮助。

相关问题