React Native的env变量介绍

前端小工
2,546 阅读7分钟

变量是编程语言的基本组成部分之一。在JavaScript中，变量存储数据类型的值，如整数、字符串等等。变量的值或数据类型可以在以后改变。

在这篇文章中，我们将了解环境变量，为什么它们是有用的，以及如何在React Native中使用它们。我们将涵盖。

什么是env变量？

变量在React Native中可以扮演不同的角色。例如，你可以在React Native中使用CSS变量来存储和实现自定义样式。

环境变量--也就是人们常说的env变量--是一个变量，其值可以从程序外部设置。它被用来存储像API端点、目录路径等信息。

如果你想减少代码中的重复，使用env变量可以帮助你完成代码的干燥。你所要做的就是在你的根文件夹中编写或定义你的变量。然后，你可以在你的组件中导入该变量，然后再调用它。

虽然env变量在React Native中非常有用，但不建议使用它们来存储敏感信息，如API密钥、认证密钥或密码。由于各种原因，它们并不安全。

例如，env变量不会对其值进行加密。它们也被嵌入到应用程序的构建中，这意味着任何人都可以通过检查你的应用程序的文件来查看它们。

如何在React Native中创建一个自定义的env变量

让我们看一下在React Native中创建env变量的例子。

你的第一步是去你的根文件夹，创建一个.env 文件。在这个文件中，写上API端点，不加任何括号，如下图所示。

REACT_APP_BASE_URL=https://api-dev.application.com

然后，在你的组件中，调用env变量，如下面的例子所示。

import React, { useState, useEffect } from "react";
import { View, Text } from "react-native";

const App = () => {
  const postUrl = process.env.REACT_APP_BASE_URL
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
      }}
    >
      <Text>ENV URL: {postUrl} </Text> // https://api-dev.endpoint.com
    </View>
  );
};
export default App;

注意我们是如何在上面的例子中定义process.env. 中的env变量的。这一步使我们能够使用process.env. 来访问env变量。

值得注意的是，我们在React Native中的所有自定义env变量都必须以REACT_APP_ 。任何没有REACT_APP_ 前缀的变量将被忽略，我们将无法在我们的应用程序中访问它们。

什么是NODE_ENV?

NODE_ENV 是一个内置的env变量，用来说明一个特定的环境是开发、测试还是生产环境。与我们在React Native中自定义的env变量不同， 不需要 前缀。NODE_ENV REACT_APP_

要使用NODE_ENV 来检查你目前在哪个环境下工作，你可以在你的App.js 文件中做如下操作。

const environment = process.env.NODE_ENV
console.log(environment)

如果你在开发环境中工作（即，当你运行npm start ），console.log(environment) 将打印development 。

如果你在测试环境中工作（即，当你运行npm test ），console.log(environment) 将打印test 。

如果你在生产环境中工作（即，当你运行npm build 推送到生产环境时），console.log(environment) 将打印production 。

NODE_ENV 不能被手动覆盖，这可以帮助开发人员避免意外地将缓慢的开发构建部署到生产环境中。

使用env变量在不同环境下的API端点之间切换

你可以使用env变量来根据环境有条件地呈现信息。例如，我们可以使用NODE_ENV 在开发、测试和生产的API端点之间切换。

你可能想知道为什么基于环境的API端点和其他信息的渲染是必要的。一个重要的原因是，我们可以在生产中进行修改或热修复，或者在开发中添加新的功能，而不破坏生产构建。

假设我们已经有了我们应用程序的实时版本，但我们想添加一个新功能或做一些其他的改变。我们不想在生产环境中做这种改变，因为我们可能会破坏应用程序。

相反，我们将不得不切换到开发环境，进行必要的改变，并进行测试。我们也可以切换到暂存环境，以确保一切正常，在推送到生产环境之前没有任何问题。

我们将建立一个非常简单的React Native应用程序，以帮助演示我们如何使用环境变量在不同的环境中切换API端点。要跟上这篇文章的其余部分，你应该知道如何使用React Native。

安装和配置dotenv 包

有许多React Native组件库和包可以帮助提供一个流畅的开发体验。一些包可以帮助我们在React Native中轻松访问我们的env变量，包括dotenv ，react-native-config ，等等。

为了本文的目的，我们将使用dotenv 包。dotenv 包允许你将你的env变量注入到React Native环境中。

要用NPM安装dotenv ，运行下面的命令。

$ npm install react-native-dotenv

要用yarn安装dotenv ，请运行下面的命令。

$ yarn add react-native-dotenv

安装完包后，启动你的应用程序。然后，让我们来配置插件。

要配置已安装的软件包，请到位于你的根文件夹中的.babelrc 或babel.config.js 文件，并添加以下内容。

module.exports = {
  plugins: [
    [
      "module:react-native-dotenv",
      {
        envName: "APP_ENV",
        moduleName: "@env",
        path: ".env"
      }
    ]
  ]
};

在这里，我们配置了我们的dotenv 包。我们还为.env 文件指定了一个路径，我们的环境变量将被存储在这里。最后，我们指定了一个名为@env 的模块，我们可以从那里导入我们的环境变量。

在我们的.env 文件中定义我们的自定义环境变量

接下来，让我们在根目录下创建我们的.env 文件。.env 文件是一个文本文件，我们将用它来定义我们的变量，如下图所示。

REACT_APP_DEV_MODE=https://api-dev.application.com
REACT_APP_PROD_MODE=https://api-prod.application.com
REACT_APP_STAGE_MODE=https://api-stage.application.com
REACT_APP_TEST_MODE=https://api-test.application.com

正如你在上面看到的，我们使用REACT_APP_ 前缀来定义我们的自定义环境变量。

从我们的@env 模块中导入和调用变量

接下来，让我们去我们的App.js 文件，从@env 模块中导入变量，我们早些时候在babel.config.js 文件中配置了这些变量。

import React from "react";
import { REACT_APP_DEV_MODE, REACT_APP_PROD_MODE } from "@env"

在我们导入变量之后，我们就可以调用它们，用它们来获取我们的API端点了。

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { REACT_APP_DEV_MODE } from '@env';

const App = () => {
    return (
        <View style={styles.screen}>
            <Text>Url: {REACT_APP_DEV_MODE}</Text> // https://api-dev.application.com
        </View>
    );
};

const styles = StyleSheet.create({
    screen: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    }
});
export default App;

我们已经看到了如何配置我们的dotenv 包，创建我们的环境变量，以及从我们的@env 模块中调用环境变量。最后，让我们利用这些知识在不同的环境中切换API端点。

检查环境并动态地调用env变量

早些时候，我们了解到，我们可以使用NODE_ENV 来检查我们处于哪个React Native环境中。然后我们可以根据该环境有条件地切换API端点。

下面的代码显示了实现这一目的的两种方法。第一种方法是通过导入我们在.env 文件中定义的env变量。第二种方法是通过使用process.env 。

// using the @env package
import { REACT_APP_DEV_MODE, REACT_APP_PROD_MODE } from '@env';

const url =
        process.env.NODE_ENV === 'development'
            ? REACT_APP_DEV_MODE
            : REACT_APP_PROD_MODE;

// Or using process.env
const url =
        process.env.NODE_ENV === 'development' ? process.env.REACT_APP_DEV_MODE : process.env.REACT_APP_PROD_MODE;

在每个方法中，我们首先检查环境，然后动态地调用相应的env变量。

总结

在这篇文章中，我们看到了为什么在React Native中使用env变量很重要。我们还学习了如何创建自定义的env变量，并使用它们在不同的环境中动态切换API端点。

我希望这篇文章能帮助你更好地理解React Native的env变量。谢谢你的阅读!

avatar
文章
阅读
粉丝