React Native和Expo入门:介绍.ENV文件
#javascript #reactnative #appdevelopment #mobileappdevelopment

从React Native开始,Expo可能是构建移动应用程序的好方法,尤其是如果您已经熟悉React。应用程序开发的一个重要方面是使用环境变量。在本文中,我们将向您展示如何使用.ENV文件来管理由Expo构建的React Native项目中的环境变量。

什么是博览会?

博览会是构建React本地应用程序的框架。它是为React本地制造的一组工具和服务。它将帮助您轻松地开始构建React Antive应用程序。 EXPO提供了一个命令行界面,使开发人员可以轻松创建,构建和发布其应用程序。

什么是.env文件?

环境变量是您应用程序在运行时使用的一组动态值。例如,您可能需要使用其他API键或URL,具体取决于您是本地还是在生产中运行应用程序。 .ENV文件是一个简单的文本文件,包含键值对,用于存储应用程序的环境变量。

将.ENV文件与Expo一起使用

要使用带有Expo的.env文件,您需要安装“ dotenv”软件包。此软件包将从.env文件加载您的环境变量,并在您的应用中提供它们。

这是您需要遵循的步骤:

首先,导航到您的终端中的项目的根目录。
运行以下命令安装DotEnv软件包:
1- npm install dotenv
2-在root目录中创建一个.env文件。这是一个可能包含的示例:

//.env file
API_KEY=your-api-key
API_URL=https://api.example.com

3-配置babel时,请记住将路径添加到.env文件中。该文件应始终位于项目的根目录中。见下文

//babel.rc
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: [
  [
    "module:react-native-dotenv",
    {
      moduleName: "@env",
      path: ".env",
    },
  ],
],
};
};

现在,您可以在代码中使用环境变量。这是如何访问API键的示例:

import { API_KEY } from '@env';
console.log(API_KEY);

在此示例中,我们正在使用我们在.env文件中定义的“ API_KEY”变量。 “ @env”语法用于告诉Expo从.env文件加载变量。

请注意,我们的.env文件应始终位于我们项目的根目录中。为了确保我们的API的安全性,将.env文件添加到.gitignore文件很重要。这将防止将文件推到存储库并确保我们的API凭据安全。

结论

使用.env文件来管理您的环境变量可能是确保应用程序敏感信息安全的好方法,并简化将应用程序部署到不同环境的过程。通过遵循本文概述的步骤,您可以开始在使用Expo构建的React Native项目中管理环境变量。