在 React 开发中，我们常常需要对 JSX 进行编译，将其转换为普通的 JavaScript 代码。在这一过程中，使用 babel 作为编译器是一个常见的选择。而在 React Native 开发中，则需要使用 Metro 作为编译器。本文将介绍如何使用 npm 包 metro-babel7-plugin-react-transform 来为 React Native 项目提供对 JSX 的编译支持。
环境准备
在开始前，请确保你已经安装了 Node.js 和 npm。我们将通过 npm 来安装并使用 metro-babel7-plugin-react-transform。
安装和配置
首先，使用 npm 安装 metro-babel7-plugin-react-transform：
npm install --save-dev metro-babel7-plugin-react-transform
然后，在项目的 .babelrc 文件中配置这个插件：
-- -------------------- ---- -------
-
---------- -------------------------------------------
---------- -
------------------- -
------------- --
------------ ----------------------
---------- ----------
--------- ----------
--
--
-
-注意，在上面的配置中，我们使用了 metro-react-native-babel-preset 这个 preset。这是因为 React Native 内置了对 JSX 的编译支持，而这个 preset 可以帮助我们正确配置 babel，使其与 React Native 兼容。
使用示例
现在，我们可以准备一个简单的示例来测试一下 metro-babel7-plugin-react-transform 是否正常工作。
在项目根目录下，创建一个名为 index.js 的文件，输入以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ----- ---- - ---- ---------------
----- ---------- ------- --------------- -
-------- -
------ -
------
------------ -------------
-------
--
-
-
------------------------------------------- -- -- ------------然后，在终端中执行以下命令：
npx react-native start
再打开一个终端窗口，执行以下命令：
npx react-native run-ios
这会启动一个 iOS 模拟器，并在其中运行我们的应用程序。在模拟器中，你应该可以看到一个白色的屏幕，上面显示着 Hello, world!。
现在，我们来对这个示例进行修改。在 HelloWorld 类的 render 方法中，修改 <Text> 标签中的文本为 Hello, react-transform!。
然后，保存文件。在保存后，你应该能够在终端窗口中看到一些输出，显示代码已经重新编译并且正在重新加载模块。你还能在模拟器中看到 Hello, react-transform! 这个新的文本。这表明我们的 metro-babel7-plugin-react-transform 插件已经正常工作了。
总结
本文介绍了如何使用 metro-babel7-plugin-react-transform 来实现 React Native 中对 JSX 的编译支持。我们涉及的内容包括安装和配置插件，以及通过一个示例说明插件的使用方法。这些内容对于 React Native 开发者来说都是十分实用的，尤其是在对 React Native 的深入了解和学习中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/metro-babel7-plugin-react-transform