在 react native 项目中使用 svg 文件就像在 web 应用程序中使用它们一样简单。 react-native-svg-transformer 库通过将导入的 svg 图像转换为 react 组件来实现这一点。本指南将引导您完成在 react native 项目中安装、配置和使用react-native-svg-transformer。
首先，确保安装了react-native-svg库。该库提供了在 react native 中渲染 svg 图像所需的组件。
要安装，请运行：
npm install react-native-svg
或
yarn add react-native-svg
详细安装说明请参考react-native-svg github页面。
接下来，安装react-native-svg-transformer库，它将把你的svg文件转换成react组件。
要安装，请运行：
npm install --save-dev react-native-svg-transformer
或
yarn add --dev react-native-svg-transformer
根据您的设置（expo 或 react native cli），配置会有所不同。以下是不同环境的配置：
使用以下配置创建或更新 metro.config.js 文件：
const { getdefaultconfig } = require("expo/metro-config");
module.exports = (() => {
const config = getdefaultconfig(__dirname);
const { transformer, resolver } = config;
config.transformer = {
...transformer,
babeltransformerpath: require.resolve("react-native-svg-transformer/expo")
};
config.resolver = {
...resolver,
assetexts: resolver.assetexts.filter((ext) => ext !== "svg"),
sourceexts: [...resolver.sourceexts, "svg"]
};
return config;
})();
使用以下配置创建或更新 metro.config.js 文件：
const { getdefaultconfig, mergeconfig } = require("@react-native/metro-config");
const defaultconfig = getdefaultconfig(__dirname);
const { assetexts, sourceexts } = defaultconfig.resolver;
/**
* metro configuration
* https://reactnative.dev/docs/metro
*
* @type {import('metro-config').metroconfig}
*/
const config = {
transformer: {
babeltransformerpath: require.resolve(
"react-native-svg-transformer/react-native"
)
},
resolver: {
assetexts: assetexts.filter((ext) => ext !== "svg"),
sourceexts: [...sourceexts, "svg"]
}
};
module.exports = mergeconfig(defaultconfig, config);
使用以下配置创建或更新 metro.config.js 文件：
const { getdefaultconfig } = require("metro-config");
module.exports = (async () => {
const {
resolver: { sourceexts, assetexts }
} = await getdefaultconfig();
return {
transformer: {
babeltransformerpath: require.resolve(
"react-native-svg-transformer/react-native"
)
},
resolver: {
assetexts: assetexts.filter((ext) => ext !== "svg"),
sourceexts: [...sourceexts, "svg"]
}
};
})();
对于使用 expo 模块而没有 expo-cli 的项目，您可能需要调整 transformer 路径以正确使用 react native 的 transformer：
-require.resolve("react-native-svg-transformer")
+require.resolve("react-native-svg-transformer/react-native")
或者，强制始终使用 expo 的变压器：
-require.resolve("react-native-svg-transformer")
+require.resolve("react-native-svg-transformer/expo")
如果您的项目使用 typescript，则需要声明 svg 文件的模块。将以下内容添加到您的declarations.d.ts 文件中（如果不存在则创建它）：
declare module "*.svg" {
import react from "react";
import { svgprops } from "react-native-svg";
const content: react.fc<svgprops>;
export default content;
}
</svgprops>
安装和配置后，您可以像任何其他组件一样在 react 组件中导入和使用 svg 文件。
示例：
导入 svg 文件：
import logo from "./logo.svg";
使用 svg 作为组件：
<Logo width={120} height={40} />
通过遵循本指南，您应该能够将 svg 文件无缝集成到您的 react native 项目中，从而增强您的开发工作流程并保持不同平台之间的一致性。
关注我看更多文章！