React Native 中环境变量的完整指南

环境变量在软件工程中非常有用。它能让你更灵活地进行配置，添加功能标志，
避免重复，并符合十二要素应用原则。
例如，你可以为后端 API 声明多个域，只需几行代码即可切换。
通常，在前端开发中，处理环境变量非常简单直接。然而，在 React Native 中，环境变量的使用存在一些差异，可能
会让新手感到困惑。
因此，本文旨在帮助你理清这些概念。

请注意：所示示例可在此处访问。

什么？没必要专门写篇文章，直接用就行了。process.env

process是 NodeJS 特有的模块。然而，React Native 并不
使用 Node 来运行其 JS 包，而是依赖于Hermes engine。遗憾的是，Hermes 并没有内置 process 模块，也没有提供模拟它的方法。

但是，有一个例外：process.env.NODE_ENV为了方便起见而实施（就像一个标准）。

这就是为什么我们需要使用单独的库或实现自定义库的原因。如今，React Native 生态系统提供了两种流行的替代方案：

• react-native-dotenv
• react-native-config

两者目的相同，但采用的策略不同，我们马上就来解释。

注意：一些资源建议使用
此 Babel 插件。
它在新版本的 RN 上无法工作，因为 process.env 文件不存在。

react-native-dotenv

react-native-dotenv 是一个Babel 插件，它可以将环境变量注入到 JavaScript 环境中。你只需在
.babelrc文件中将其声明为插件即可！让我们来看一个例子。

这是我们的 .env 文件：

FEATURE_ENABLED=true

在我们的代码中，可以这样访问它：

import {FEATURE_ENABLED} from "@env"

console.log(FEATURE_ENABLED)

对于 TypeScript 用户来说，您需要创建一个定义文件env.d.ts才能使用代码补全功能。

declare module '@env' {
    export const FEATURE_ENABLED: boolean;
}

正如我们所见，由于这是一个 Babel 插件，我们的变量只能在 JS 部分访问。因此，如果我们想在原生部分访问这些变量，就必须使用另一个库
react-native-config。

react-native-config

如上所述，该库的独特之处在于它允许你在两端访问变量。他们通过直接解析原生端的 .env 文件
并生成映射来实现这一点。

在JS方面，其用法与之前的库类似：

import Config from "react-native-config";

Config.FEATURE_ENABLED; // true

而对于本地居民来说：

public Boolean isFeatureEnabled(){
    return BuildConfig.FEATURE_ENABLED;
        }

关于 Gradle 配置：

defaultConfig {
    applicationId project.env.get("FEATURE_ENABLED")
}

如我们所见，这个库提供了更多可能性。然而，由于它是在原生端实现的，如果你想
在 JavaScript 端访问环境变量的值，就需要进行额外的交互，如果处理不当，可能会导致性能问题或不必要的往返。因此，我们建议仅在确定
需要在原生端访问环境变量时才使用此库。

结论

正如我们所见，React Native 中有几种处理环境变量的方法。根据您的需求，您可能需要其中一种。
以下是简要概述：

太长不看

• 主要使用了两个库：react-native-dotenv和react-native-config。
• 两者都易于使用且易于配置。
• react-native-dotenv如果您的变量仅需要在 JS 部分中使用，请使用此方法。
• 如果您的变量在原生代码和 JS 代码中react-native-config都需要，请使用此方法。
• process.env由于它不是在 NodeJS 应用中运行，而是在 Hermes 引擎应用中运行，因此无法在 RN 生态系统中使用。