在 react native 项目中使用 svg 文件就像在 web 应用程序中使用它们一样简单。 react-native-svg-transformer 库通过将导入的 svg 图像转换为 react 组件来实现这一点。本指南将引导您完成在 react native 项目中安装、配置和使用react-native-svg-transformer。
好处
- 一致性: 对 react native 和 web 项目使用相同的 svg 文件。
- 灵活性: 轻松导入和使用 svg 文件作为 react 组件。
分步安装和配置
第1步:安装react-native-svg库
首先,确保安装了react-native-svg库。该库提供了在 react native 中渲染 svg 图像所需的组件。
要安装,请运行:
npm install react-native-svg
或
yarn add react-native-svg
详细安装说明请参考react-native-svg github页面。
第2步:安装react-native-svg-transformer库
接下来,安装react-native-svg-transformer库,它将把你的svg文件转换成react组件。
要安装,请运行:
npm install --save-dev react-native-svg-transformer
或
yarn add --dev react-native-svg-transformer
第 3 步:配置 react native 打包器
根据您的设置(expo 或 react native cli),配置会有所不同。以下是不同环境的配置:
对于 expo sdk v41.0.0 或更高版本
使用以下配置创建或更新 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 文件:
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);
对于 react native v0.59 或更高版本
使用以下配置创建或更新 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 模块而没有 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
如果您的项目使用 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} />
其他资源
- 演示项目:
- react-native-svg-示例
- react-native-svg-expo-示例
通过遵循本指南,您应该能够将 svg 文件无缝集成到您的 react native 项目中,从而增强您的开发工作流程并保持不同平台之间的一致性。
关注我看更多文章!