react-native-svg-transformer
React Native SVG转换器允许您在React Native项目中以与Web应用程序相同的方式导入SVG文件,就像使用SVGR库将导入的SVG图像转换为React组件一样。
这使得在React Native和Web中使用相同的代码成为可能。
使用方法
在React组件中导入您的.svg
文件:
import Logo from "./logo.svg";
然后您可以将图像作为组件使用:
<Logo width={120} height={40} />
演示 / Expo演示(iOS/Android/Web)
安装和配置
步骤1:安装react-native-svg库
确保您已安装react-native-svg
库:
步骤2:安装react-native-svg-transformer库
npm install --save-dev react-native-svg-transformer
或
yarn add --dev react-native-svg-transformer
步骤3:配置react native打包器
对于Expo SDK v41.0.0或更新版本
将您项目的metro.config.js
文件内容与此配置合并(如果文件不存在,请创建)。
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;
})();
对于React Native v0.72.1或更新版本
将您项目的metro.config.js
文件内容与此配置合并(如果文件不存在,请创建)。
metro.config.js
:
const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;
/**
* Metro配置
* 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);
对于React Native v0.59或更新版本
将您项目的metro.config.js
文件内容与此配置合并(如果文件不存在,请创建)。
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模块的React Native项目
一些React Native项目使用Expo模块,但不使用expo-cli。
在这些项目中,默认选择Expo的转换器,可以通过在require路径中添加react-native
来正确使用React Native的转换器:
-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
如果您使用TypeScript,需要在declarations.d.ts
文件中添加以下内容(如果没有该文件,请创建一个):
declare module "*.svg" {
import React from "react";
import { SvgProps } from "react-native-svg";
const content: React.FC<SvgProps>;
export default content;
}
配置SVGR(SVG图像如何转换)
SVGR有一个配置文件,使您可以自定义SVG图像如何转换为React/React Native。
例如,如果您想将SVG图像的填充颜色从red
更改为currentColor
(请记住,这将用于应用程序中的所有SVG图像)。
.svgrrc
(如果文件不存在,请在项目根文件夹中创建)
{
"replaceAttrValues": {
"red": "currentColor"
}
}
在JS代码中更改SVG填充颜色
编辑您的.svgrrc
文件,包含一行replaceAttrValues
,将十六进制代码匹配到{props.fill}
{
"replaceAttrValues": {
"#000": "{props.fill}"
}
}
然后确保SVG文件中的path标签的fill
属性是十六进制代码(在这种情况下是#000
)。
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.965 6.0925C4.045 8.215 ..." fill="#000"/>
</svg>
然后您可以将图像作为组件使用:
<Logo width={120} height={40} fill={"任意颜色"} />
与Jest一起使用
要使用Jest
测试导入.svg
图像的React Native组件,您需要添加以下配置,模拟转换为React组件的SVG图像:
__mocks__/svgMock.js
:
module.exports = "SvgMock";
然后,根据您的Jest配置位置:
package.json
:
{
"jest": {
"moduleNameMapper": {
"\\.svg": "<rootDir>/__mocks__/svgMock.js"
}
}
}
或
jest.config.js
:
module.exports = {
moduleNameMapper: {
"\\.svg": "<rootDir>/__mocks__/svgMock.js"
}
};
在iOS中渲染自定义字体
目前,react-native-svg在iOS中不直接支持自定义字体系列。一种解决方法是将带有自定义字体的.svg
转换为轮廓。这将在.svg
文件中用path
标签替换text
标签。
依赖项
除了React Native外,此转换器还依赖以下库: