如何将导入返回从响应更改为特定文件扩展名答案

【问题标题】：How can I change the import return from react to a specific file extension如何将导入返回从响应更改为特定文件扩展名
【发布时间】：2021-05-07 01:48:03
【问题描述】：

我想知道有没有办法处理react native中通过import引入的文件类型，例如：

从“icons/Icon.svg”导入图标

添加一些改变导入返回类型的代码，例如不返回svg src，返回已经准备好的组件，或者编辑原始svg，比如路径属性等。

【问题讨论】：

【解决方案1】：

您可以先将 svg 文件更改为 jsx 文件，然后导出 svg，如下例所示：

export default function Svg(){
  return <svg>...</svg>
}

然后你可以像使用任何其他组件一样使用 svg。

【讨论】：

不，我不认为你理解，例如，假设在我的项目中我有一个 icon.svg 文件，如果我将它导入并尝试将其用作组件，它将给出一个错误，因为 xml 语法不是 react-native，我想知道你是否可以拦截这个，处理这个 svg 并返回一个反应组件，我见过有人说可以使用 babel 插件来做到这一点，但是我没有找到任何教授如何做到这一点的客观文章，我的目标是拦截针对 .svg 扩展名的导入，并用正则表达式或其他东西处理 xml 以将其转换为组件反应。
发生了什么，是我在我的项目中使用了 react-native-svg-transformer 依赖项，但它只能使用 Metro，而世博会不会使用 Metro 来进行 React Web跨度>
只适用于android / iOS，而不是从metro config他使用webpack.config，但是这个依赖不支持最新的web expo sdks，作者似乎没有兴趣解决这个问题，所以我需要找个临时工来解决这个问题，因为我已经用这种方式编写了很多代码，并且我需要一种导入svgs的方法，它既兼容web又兼容移动设备，并且允许我更改svg属性，比如宽度、高度、填充

【解决方案2】：

我设法解决了它，我发现有必要创建一个加载器来重写针对 svg 的导入，现在我可以使用相同的方式在 web expo 和移动设备中导入图标，我不'不知道这是否是解决问题的正确方法，我发现的唯一一个，但对我来说它已经作为一个临时解决方案。

【讨论】：