前言
在 React Native 开发过程中，我们需要使用 Expo CLI 来快速搭建项目，而其中 expo-config 这个 npm 包则可以帮助我们从项目中删除所有明文的配置和敏感的密钥，只需使用一个 JSON 文件即可保存所有项目的配置信息。在这篇文章中，我们将会详细地学习如何使用 expo-config 包，在项目管理方面给出一些实用的指导意义。
安装
首先，我们需要使用 npm 命令来安装 expo-config 包：
npm install expo-config
配置文件
我们需要在项目的根目录下创建一个名为 app.json 的配置文件，来管理所有的设置信息。下面是一个简单的示例：
-- -------------------- ---- -------
-
------- -
------- --- ------- -----
---------- --------
------- --------------------
--------- -
-------- ----------------------
------------- ----------
------------------ ---------
--
------------------- -
------------------ ----------
----------- ---------------
--
--------- -
---------- -
---------- -------------------
-
--
------ -
---------- ----------------------
--
-------- -
---------- -------------------------
-
-
-可以看到，我们使用 JSON 格式定义了该应用的名称，版本，图标，闪屏页等等。还可以定义如安卓应用的包名和额外的配置项（以下将会提到）。
使用 Config
在 React Native 项目的代码中，我们可以新建一个 config.js 文件，并使用 expo-config 包来获取 app.json 文件中的配置信息：
-- -------------------- ---- -------
------ --------- ---- -----------------
------ - -------- - ---- ---------------
------ --------- ---- --------------
----- --- - -
---- -
-------- ----------------------------
--
----- -
-------- --------------------------
--
--
----- ---------- - ---- - ---------------------------------- -- -
-- --------- ------ --------
-- ---- --- ------- ------ ---------
--
----- - ----- - - ------------
------ ------- -
---------
--------- ------------
----------------
--上面这段代码，我们首先通过 expo-constants 包获取了项目中的 manifest 信息，然后通过该信息的 releaseChannel 字段，来判断目前所处的环境是开发还是生产。接着，我们导入了 expo-config 包，并获取其中的 extra 信息，从而获得本地配置的数据。最后，将运行中的操作系统平台，以及配置中的 API_URL 数据，整合导出。
引用 Config
在我们的代码中，使用导出的 config.js 文件中所定义的变量，例如：
import Config from './config';
fetch(`${Config.API_URL}/users`)
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error(error));上面这段代码，我们使用 fetch 请求来获取数据。在 URL 中，我们使用了我们的 config.js 文件中定义的 API_URL 变量，来告诉应用我们需要访问的接口地址。
额外配置
如果你需要在 app.json 文件中定义更多地变量，可以尝试在 "expo": {} 下添加 "extra": {}键，并在其中提供其他的配置项。举个例子，你可以存储 API 密钥和其他敏感数据：
-- -------------------- ---- -------
-
------- -
------- --- ------- -----
---------- --------
-------- -
---------- ---------
----------------- ----
-
-
-我们可以使用 getConfig 方法来获取这些参数：
import getConfig from 'expo-config';
const { extra } = getConfig();
console.log(extra.API_KEY, extra.ENABLE_LOGGING);结论
在这篇文章中，我们学习了如何使用 npm 包 expo-config 来管理 React Native 的配置信息，并在我们的代码中引用这些数据。处理项目中的敏感的密钥和配置信息并不是一件容易的事情，但是 expo-config 这个包让我们能够更好地对其进行管理和保护。面对不断壮大的 React Native 应用，合理规划和管理配置是一个非常重要的任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067380890c4f72775841af