简介
@expo/metro-config 是一款用于 React Native 项目的 Metro 配置工具，它可以帮助我们在项目中配置 Metro Bundler 构建过程中的相关参数。
简单来说，Metro Bundler 是 React Native 项目的打包工具，它在运行时将应用程序的 JavaScript 代码转换为可以运行在设备上的原生代码。@expo/metro-config 则可以通过相应的配置参数来定制 Metro Bundler 的行为，从而满足项目的需求。
本文将详细介绍如何使用 @expo/metro-config 进行 React Native 项目的配置。
安装
在使用 @expo/metro-config 之前，需要先安装它：
$ npm install --save-dev @expo/metro-config
参数配置
@expo/metro-config 的主要参数配置在 metro.config.js 文件中，该文件应放置在项目的根目录下。
下面是一个例子：
-- -------------------- ---- -------
----- - ---------------- - - ------------------------------
-------------- - ------ -- -- -
----- -
--------- - ---------- --
- - ----- ----------------------------
------ -
------------ -
--------------------- ------------------------------------------------
--
--------- -
----------- --------------- -------
--
--
-----该例子中主要配置了两个参数：
transformer.babelTransformerPath：用于将 SVG 文件转换为 React Native 组件的转换器路径；resolver.sourceExts：用于让 Metro Bundler 识别 SVG 文件。
示例代码
接下来，将介绍如何使用 @expo/metro-config 配置 React Native 项目中的 Metro Bundler。
假设我们有一个名为 MyApp 的项目，该项目中有一个 src 目录，该目录中有一个 App.js 文件和一个名为 svg 的目录。
我们希望将 svg 目录下的 SVG 文件转换为 React Native 组件，并使它们可以在 JavaScript 代码中使用。
安装依赖
为了使用 @expo/metro-config，需要先安装相关依赖：
$ npm install --save-dev @expo/metro-config react-native-svg-transformer
其中，react-native-svg-transformer 是一个用于将 SVG 文件转换为 React Native 组件的转换器。
配置 metro.config.js
在项目的根目录下创建 metro.config.js 文件，并添加以下内容：
-- -------------------- ---- -------
----- - ---------------- - - ------------------------------
-------------- - ------ -- -- -
----- -
--------- - ---------- --
- - ----- ----------------------------
------ -
------------ -
--------------------- ------------------------------------------------
--
--------- -
----------- --------------- -------
--
--
-----该文件的作用如前所述：将 SVG 文件转换为可在 JavaScript 代码中使用的 React Native 组件。
调用 SVG 组件
现在，我们可以在 MyApp/src/App.js 中调用 SVG 组件了。假设项目中有一个名为 check.svg 的 SVG 文件，可以在 App.js 中这样使用它：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------- ----------- ---- ---------------
------ -------- ---- ------------------
----- --- - -- -- -
------ -
------------- -------------------------
--------- --
---------------
--
--
----- ------ - -------------------
---------- -
----- --
--
---
------ ------- ----注意：在使用 react-native-svg-transformer 转换器时，需要在 SVG 文件中添加 xmlns="http://www.w3.org/2000/svg" 属性，以正确解析 SVG 文件。
总结
@expo/metro-config 是一款用于 React Native 项目的 Metro 配置工具，它可以帮助我们轻松地配置 Metro Bundler 的参数，以满足项目的需求。
使用 @expo/metro-config 的步骤非常简单：首先安装依赖，然后在项目的根目录下创建 metro.config.js 文件并添加相应的参数，最后即可在 JavaScript 代码中调用 SVG 组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2eb23a3b0ab45f74a8bc64