如何在React Native应用程序中正常使用环境变量

API Keys and secrets always contain some amount of sensitive data or a token that needs to be saved gracefully. Managing different keys for different environments, such as development or production, is a common practice among JavaScript developers. Hence, the mechanism of .env file exists.

API密钥和机密始终包含一些敏感数据或令牌，需要妥善保存。 在JavaScript开发人员中，为不同的环境(例如开发或生产)管理不同的密钥是一种常见的做法。 因此，存在.env文件的机制。

There is a way in React Native apps to save o save API Keys and other sensitive information without integrating any native code. In this short post, you are going to learn how to install and integrate a small library that helps you use environment variables without exposing sensitive information.

React Native应用程序中有一种方法可以保存或保存API密钥和其他敏感信息，而无需集成任何本机代码。 在这篇简短的文章中，您将学习如何安装和集成一个小的库，该库可以帮助您使用环境变量而不暴露敏感信息。

Note that the steps mentioned in this post for installing and integrating react-native-dotenv can be used with an Expo project in a similar manner as described below.

请注意，本文中提到的用于安装和集成react-native-dotenv可以与Expo项目一起使用，如下所述。

---

---

要求 (Requirements)

To follow this tutorial, please make sure you have the following installed on your local development environment and have access to the services mentioned below.

要遵循本教程，请确保在本地开发环境中安装了以下内容，并且可以访问下面提到的服务。

• Nodejs (>= 8.x.x) with npm/yarn installed

  安装了npm / yarn的Node.js (> = 8.xx)

• react-native-cli to create and run a new React Native app

  react-native-cli创建并运行一个新的React Native应用

• watchman: The file change watcher for React Native projects

  watchman ：React Native项目的文件更改监视程序

入门 (Getting Started)

To get started, create a new project using the react-native-cli in a terminal window.

首先，在终端窗口中使用react-native-cli创建一个新项目。

react-native init RNEnvVariables

# navigate inside the project directory
cd RNEnvVariables

Once the project directory is created, navigate it. Create a new file called .env. This file is going to hold all API keys or any sensitive information. Make sure you add this file to .gitignore such that you don't end up exposing any secret key on a version control website like Github.

创建项目目录后，请浏览它。 创建一个名为.env的新文件。 该文件将保留所有API密钥或任何敏感信息。 确保将此文件添加到.gitignore ，以免最终不会在Github等版本控制网站上公开任何密钥。

To get started, let us add a mock key called SOME_KEY to the file .env.

首先，让我们向文件.env添加一个名为SOME_KEY的模拟密钥。

SOME_KEY=something

Do take a note that .env files do consider strings valid inside any quotes. Also, writing SOME_KEY in uppercase is just a naming convention quite commonly followed.

请注意， .env文件确实认为字符串在任何引号内均有效。 同样，以大写形式编写SOME_KEY只是一个很常见的命名约定。

安装react-native-dotenv (Install react-native-dotenv)

Next, install the dependency react-native-dotenv that will help you manage your environment variables gracefully throughout this app. Go to the terminal window, and execute the following command.

接下来，安装依赖项react-native-dotenv ，它将帮助您在整个应用程序中优雅地管理环境变量。 进入终端窗口，执行以下命令。

yarn add react-native-dotenv

The module react-native-dotenv lets you import environment variables from a .env file. To make it work, open the babel.config.js file and modify presets like below.

模块react-native-dotenv允许您从.env文件导入环境变量。 要使其正常工作，请打开babel.config.js文件并修改如下的presets 。

module.exports = {   
    presets: ['module:metro-react-native-babel-preset', 'module:react-native-dotenv']
}

运行应用 (Running the app)

To verify that it is working, open App.js and import the SOME_KEY from the package itself. react-native-dotenv parses the .env file that lets you import the environment variable mentioned inside the file.

要验证它是否正常运行，请打开App.js并从包本身导入SOME_KEY 。 react-native-dotenv解析.env文件，该文件可让您导入文件中提到的环境变量。

// after other imports
import { SOME_KEY } from 'react-native-dotenv'

If you open this demo React Native application in its current state using an iOS simulator or an Android emulator, you will be welcomed by the following screen.

如果您使用iOS模拟器或Android模拟器以当前状态打开此演示版React Native应用程序，则会受到以下屏幕的欢迎。

Edit the line in App.js file where it says Step One with the environment variable as shown below.

编辑App.js文件中的行， 其中包含环境变量的行如下所示，如下所示。

<Text style={styles.sectionTitle}>{SOME_KEY}</Text>

Now go back to the simulator and you will notice the change.

现在回到模拟器，您将注意到更改。

结论 (Conclusion)

It is that simple to use react-native-dotenv. You do not have to add any native code to integrate for each mobile OS platform separately. For a more pragmatic example, you can check out my recent post on Firebase authentication in a React Native and Expo app. You will notice that using the same module we have discussed above in an Expo app.

使用react-native-dotenv很简单。 您不必添加任何本机代码即可分别集成到每个移动OS平台。 有关更实际的示例，您可以在React Native和Expo应用程序中查看我最近有关Firebase身份验证的文章。 您会注意到，使用了我们上面在Expo应用程序中讨论的相同模块。

---

---

I am on available on ? Twitter and run a free weekly newsletter (600+ devs have joined) in which I share tips and new posts on Nodejs, Reactjs, GraphQL and React Native.

我上班了吗？ 推特(Twitter)并每周免费运行新闻通讯(已加入600多个开发人员)，我在其中分享有关Node.js，React.js，GraphQL和React Native的技巧和新文章。

✉️ Join my weekly newsletter here.

Join️ 在这里加入我的每周新闻。

翻译自: https://www.freecodecamp.org/news/how-to-gracefully-use-environment-variables-in-a-react-native-app/