React Native .env 配置指南
本指南旨在帮助您了解并有效使用 react-native-dotenv 开源项目,以实现React Native应用中的环境变量管理。此库允许您在React Native项目中使用.env
文件来存储敏感或环境特定的信息。
1. 项目目录结构及介绍
项目的核心在于其简洁性,通常React Native项目结构加上react-native-dotenv
的整合,可能会包括以下关键部分:
react-native-app/
├── node_modules/ <- 第三方依赖,包括react-native-dotenv
├── src/ 或 app/ <- 您的应用代码主要位置
│ └── ...
├── .env <- 主环境配置文件
├── .env.production <- 生产环境配置
├── .env.development <- 开发环境配置
├── package.json <- 项目配置和依赖列表
├── yarn.lock / package-lock.json <- 依赖版本锁定文件
└── ... <- 其他如 README.md, index.js 或 App.js等
重点: .env
文件用于存放环境变量,不同环境(如开发、测试、生产)可以通过命名不同的.env
文件来区分管理。
2. 项目的启动文件介绍
在React Native项目中,通常的启动文件是index.js
或App.js
。当使用react-native-dotenv
时,无需直接修改这些启动文件来引入环境变量。配置的关键在于正确设置Node环境变量的解析。您需要确保在项目初始化阶段,react-native-dotenv
已经被正确引用,这样您的应用代码可以直接通过ES6导入语法访问环境变量,例如:
// 在任意组件内
import { REACT_APP_API_KEY } from '@env';
无需显式地在启动文件中引入.env
文件,环境变量将自动加载。
3. 项目的配置文件介绍
.env 文件
.env
文件及其同名但带有环境标识的文件(如.env.development
, .env.production
)是项目的核心配置所在。这些文件遵循特定的命名规则,即环境变量前缀REACT_APP_
,这是为了避免Webpack将它们视为公共全局变量。
示例 .env
文件:
REACT_APP_API_URL=http://localhost:3000/api
REACT_APP_DEBUG_MODE=true
请注意,只有以REACT_APP_
开头的变量才会被包含进构建过程中,其他变量不会被读取。
package.json 脚本配置
为了根据不同环境加载对应的.env
文件,虽然react-native-dotenv
默认只处理.env
文件,但您可以在脚本命令中指定环境变量,例如在运行或打包命令之前设定环境:
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"ios": "react-native run-ios",
"debug": "react-native start --variant=debug",
"build:prod": "react-native run-android --variant=release"
}
对于更复杂的环境管理,可能需要利用外部工具或自定义脚本来管理环境切换。
通过这样的组织方式,react-native-dotenv
使得管理React Native应用中的环境变量变得简便而高效。确保遵循最佳实践,保持环境间的隔离性和安全性。