[英]How to show SVG file on React Native?
我想顯示 svg 個文件(我有一堆 svg 個圖像)但是我找不到顯示方式。 我嘗試使用React-native-svg的Image和Use組件,但它們不起作用。 我嘗試用原生方式來做到這一點,但只顯示 svg 圖像真的很難。
示例代碼:
import Svg, {
Use,
Image,
} from 'react-native-svg';
<View>
<Svg width="80" height="80">
<Image href={require('./svg/1f604.svg')} />
</SvgRn>
</View>
我也知道 react native 基本上不支持 svg 但我認為有人用棘手的方式解決了這個問題(有/沒有 react-native-svg)
我使用了以下解決方案:
.svg
圖像轉換為 JSXreact-native-svg
組件(選中“React Native 復選框)我張貼了另一種解決方案(反應母語-矢量圖標) 這里。 這種方法使用矢量字體(來自 SVG)而不是 SVG 文件。 PS:react-native-vector-icons 是在 react-native 中處理 SVG 的最佳方法,它也適用於 iOS 和 android。 您將能夠更改矢量圖標的顏色和大小。
如果你想直接在你的應用中插入一個 svg,你可以嘗試一個 3rd 方庫:react-native-svg。 在 github 中擁有超過 3k 顆星,這是最好的方法之一。
使用npm
安裝其中任何一個:
然后將其鏈接到本機使用
react-native link react-native-svg
一個帶有react-native-svg-uri
的例子:
import * as React from 'react';
import SvgUri from 'react-native-svg-uri'; // SVG Package
import testSvg from './test.svg'; // SVG File
export default () => (
<SvgUri
width="200"
height="200"
svgXmlData={testSvg}
/>
);
安裝react-native-svg-transformer
npm i react-native-svg-transformer --save-dev
我使用 SVG 如下,它工作正常
import LOGOSVG from "assets/svg/logo.svg"
在渲染中
<View>
<LOGOSVG
width="100%"
height="70%"
/>
</View>
我已經嘗試了上述所有解決方案和堆棧之外的其他解決方案,但沒有一個對我有用。 最后,經過長時間的研究,我為我的博覽會項目找到了一種解決方案。
如果您需要它在博覽會中工作,一種解決方法可能是使用https://react-svgr.com/playground/並將道具的傳播移動到 G 元素而不是像這樣的 SVG 根:
import * as React from 'react';
import Svg, { G, Path } from 'react-native-svg';
function SvgComponent(props) {
return (
<Svg viewBox="0 0 511 511">
<G {...props}>
<Path d="M131.5 96c-11.537 0-21.955 8.129-29.336 22.891C95.61 132 92 149.263 92 167.5s3.61 35.5 10.164 48.609C109.545 230.871 119.964 239 131.5 239s21.955-8.129 29.336-22.891C167.39 203 171 185.737 171 167.5s-3.61-35.5-10.164-48.609C153.455 104.129 143.037 96 131.5 96zm15.92 113.401C142.78 218.679 136.978 224 131.5 224s-11.28-5.321-15.919-14.599C110.048 198.334 107 183.453 107 167.5s3.047-30.834 8.581-41.901C120.22 116.321 126.022 111 131.5 111s11.28 5.321 15.919 14.599C152.953 136.666 156 151.547 156 167.5s-3.047 30.834-8.58 41.901z" />
<Path d="M474.852 158.011c-1.263-40.427-10.58-78.216-26.555-107.262C430.298 18.023 405.865 0 379.5 0h-248c-26.365 0-50.798 18.023-68.797 50.749C45.484 82.057 36 123.52 36 167.5s9.483 85.443 26.703 116.751C80.702 316.977 105.135 335 131.5 335a57.57 57.57 0 005.867-.312 7.51 7.51 0 002.133.312h48a7.5 7.5 0 000-15h-16c10.686-8.524 20.436-20.547 28.797-35.749 4.423-8.041 8.331-16.756 11.703-26.007V503.5a7.501 7.501 0 0011.569 6.3l20.704-13.373 20.716 13.374a7.498 7.498 0 008.134 0l20.729-13.376 20.729 13.376a7.49 7.49 0 004.066 1.198c1.416 0 2.832-.4 4.07-1.2l20.699-13.372 20.726 13.374a7.5 7.5 0 008.133 0l20.732-13.377 20.738 13.377a7.5 7.5 0 008.126.003l20.783-13.385 20.783 13.385a7.5 7.5 0 0011.561-6.305v-344a7.377 7.377 0 00-.146-1.488zM187.154 277.023C171.911 304.737 152.146 320 131.5 320s-40.411-15.263-55.654-42.977C59.824 247.891 51 208.995 51 167.5s8.824-80.391 24.846-109.523C91.09 30.263 110.854 15 131.5 15s40.411 15.263 55.654 42.977C203.176 87.109 212 126.005 212 167.5s-8.824 80.391-24.846 109.523zm259.563 204.171a7.5 7.5 0 00-8.122 0l-20.78 13.383-20.742-13.38a7.5 7.5 0 00-8.131 0l-20.732 13.376-20.729-13.376a7.497 7.497 0 00-8.136.002l-20.699 13.373-20.727-13.375a7.498 7.498 0 00-8.133 0l-20.728 13.375-20.718-13.375a7.499 7.499 0 00-8.137.001L227 489.728V271h8.5a7.5 7.5 0 000-15H227v-96.5c0-.521-.054-1.03-.155-1.521-1.267-40.416-10.577-78.192-26.548-107.231C191.936 35.547 182.186 23.524 171.5 15h208c20.646 0 40.411 15.263 55.654 42.977C451.176 87.109 460 126.005 460 167.5V256h-.5a7.5 7.5 0 000 15h.5v218.749l-13.283-8.555z" />
<Path d="M283.5 256h-16a7.5 7.5 0 000 15h16a7.5 7.5 0 000-15zM331.5 256h-16a7.5 7.5 0 000 15h16a7.5 7.5 0 000-15zM379.5 256h-16a7.5 7.5 0 000 15h16a7.5 7.5 0 000-15zM427.5 256h-16a7.5 7.5 0 000 15h16a7.5 7.5 0 000-15z" />
</G>
</Svg>
);
}
export default function App() {
return (
<SvgComponent width="100%" height="100%" strokeWidth={5} stroke="black" />
);
}
你可以用一種簡單的方法來做到這一點
const { getDefaultConfig } = require("metro-config"); module.exports = (async () => { const { resolver: { sourceExts, assetExts } } = await getDefaultConfig(); return { transformer: { babelTransformerPath: require.resolve("react-native-svg-transformer") }, resolver: { assetExts: assetExts.filter(ext => ext !== "svg"), sourceExts: [...sourceExts, "svg"] } }; })();
declare module "*.svg" { import { SvgProps } from "react-native-svg"; const content: React.FC<SvgProps>; export default content; }
最后,這是一個導入方法
import USER from "../../assets/icons/user.svg"
而且,這是針對 jsx
<USER width="100%" height="100%"/>
我有同樣的問題。 我正在使用我發現的這個解決方案: React Native display SVG from a file
它並不完美,我今天重新審視,因為它在 Android 上的表現要差得多。
使用https://github.com/kristerkari/react-native-svg-transformer
在這個包中提到.svg
文件在 React Native v0.57 及更低版本中不受支持,因此對 svg 文件使用.svgx
擴展名。
對於 web 或 react-native-web 使用https://www.npmjs.com/package/@svgr/webpack
要使用react-native-svg-uri
和 react-native 版本 0.57 及更低版本渲染 svg 文件,您需要將以下文件添加到您的根項目中
注意:將擴展名
svg
更改為svgx
transformer.js
添加到項目的根目錄// file: transformer.js
const cleanupSvg = require('./cleanup-svg');
const upstreamTransformer = require("metro/src/transformer");
// const typescriptTransformer = require("react-native-typescript-transformer");
// const typescriptExtensions = ["ts", "tsx"];
const svgExtensions = ["svgx"]
// function cleanUpSvg(text) {
// text = text.replace(/width="([#0-9]+)px"/gi, "");
// text = text.replace(/height="([#0-9]+)px"/gi, "");
// return text;
// }
function fixRenderingBugs(content) {
// content = cleanUpSvg(content); // cleanupSvg removes width and height attributes from svg
return "module.exports = `" + content + "`";
}
module.exports.transform = function ({ src, filename, options }) {
// if (typescriptExtensions.some(ext => filename.endsWith("." + ext))) {
// return typescriptTransformer.transform({ src, filename, options })
// }
if (svgExtensions.some(ext => filename.endsWith("." + ext))) {
return upstreamTransformer.transform({
src: fixRenderingBugs(src),
filename,
options
})
}
return upstreamTransformer.transform({ src, filename, options });
}
rn-cli.config.js
添加到項目的根目錄module.exports = {
getTransformModulePath() {
return require.resolve("./transformer");
},
getSourceExts() {
return [/* "ts", "tsx", */ "svgx"];
}
};
上面提到的解決方案也適用於生產應用程序✅
SVG 在本機應用程序中不直接支持。 為了顯示那些我們需要借助第三方模塊
請按照以下步驟操作
第 1 步。 安裝react-native-svg和react-native-svg-transformer
npm i react-native-svg react-native-svg-transformer
第 2 步。 如果不存在,則添加文件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")
},
resolver: {
assetExts: assetExts.filter(ext => ext !== "svg"),
sourceExts: [...sourceExts, "svg"]
}};
})();
第 3 步。 像 React 組件一樣使用 SVG 文件
import Invest from '../assets/invest.svg'; // import SVG
return (
<View>
<Invest /> // Use SVG as component
</View>
)
import React from 'react'
import SvgUri from 'react-native-svg-uri';
export default function Splash() {
return (
<View style={styles.container}>
{/* provided the svg file is stored locally */}
<SvgUri
width="400"
height="200"
source={require('./logo.svg')}
/>
{/* if the svg is online */}
<SvgUri
width="200"
height="200"
source={{ uri: 'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg' }}
/>
<Text style={styles.logoText}>
Text
</Text>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
logoText: {
fontSize: 50
}
});
在react native項目中使用svg並不像在web中使用那么簡單,雖然也沒有那么難。
在我看來,上述許多答案都很復雜。 所以,這是我使用和喜歡的解決方案。
由於 React Native 不直接支持 svg 文件格式,您需要執行一些步驟才能使其正常工作。
1.安裝react-native-svg
npm install react-native-svg --save
這個package會幫你渲染svg文件
2.安裝react-native-svg-transformer
npm install react-native-svg-transformer --save
這個 package 會將您的 svg 轉換為本機可以理解的格式。
3.導入svg作為普通組件
import Belsvg from "../assets/belsvg.svg";
在導入時給它一個你喜歡的名字,現在這個 svg 被react-native-svg-transformer
轉換成一個反應本機組件
4.現在你可以把它當作普通組件使用了
有關詳細說明和示例,請訪問鏈接:
https://kumar2396jayant.medium.com/how-to-use-svg-in-react-native-e581eca59534
ps:我要感謝Jayant kumar yadav發布該博客
注意:Svg 不適用於 android 發行版,所以不要考慮 android。 它僅適用於調試模式下的 android。 但它適用於ios。
使用https://github.com/vault-development/react-native-svg-uri
安裝
npm install react-native-svg-uri --save
react-native link react-native-svg # not react-native-svg-uri
用法
import SvgUri from 'react-native-svg-uri';
<SvgUri source={require('./path_to_image/image.svg')} />
我用這兩個插件
首先,您需要安裝該插件。 之后,您需要使用此代碼更改您的 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")
},
resolver: {
assetExts: assetExts.filter(ext => ext !== "svg"),
sourceExts: [...sourceExts, "svg"]
}
};
})();
有關更多詳細信息,您可以訪問此鏈接
react-native-svg
安裝到您的項目中。例如:- 這是我得到的示例 SVG。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17" height="17" viewBox="0 0 17 17">
<defs>
<path id="a" d="M16.191 1.027L9.023 8.196l7.168 7.168-.83.83-7.169-7.167-7.168 7.168-.831-.831L7.36 8.196.19 1.027l.832-.83L8.19 7.366 15.359.197z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="b" fill="#fff">
<use xlink:href="#a"/>
</mask>
<use fill="#FFF" fill-rule="nonzero" xlink:href="#a"/>
<g fill="#3D3D3D" mask="url(#b)">
<path d="M0 0h16v16H0z"/>
</g>
</g>
</svg>
輸出:-
import * as React from "react"
import Svg, { Defs, Path, G, Mask, Use } from "react-native-svg"
function SvgComponent(props) {
return (
<Svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width={17}
height={17}
viewBox="0 0 17 17"
{...props}
>
<Defs>
<Path
id="prefix__a"
d="M16.191 1.027L9.023 8.196l7.168 7.168-.83.83-7.169-7.167-7.168 7.168-.831-.831L7.36 8.196.19 1.027l.832-.83L8.19 7.366 15.359.197z"
/>
</Defs>
<G fill="none" fillRule="evenodd">
<Mask id="prefix__b" fill="#fff">
<Use xlinkHref="#prefix__a" />
</Mask>
<Use fill="#FFF" fillRule="nonzero" xlinkHref="#prefix__a" />
<G fill="#3D3D3D" mask="url(#prefix__b)">
<Path d="M0 0h16v16H0z" />
</G>
</G>
</Svg>
)
}
export default SvgComponent
** 但是當我在我的項目中使用上面的代碼並且它沒有正確呈現時。 所以我按照下面的方式做了,不知何故它對我有用。
import * as React from "react"
import Svg, { Path, G } from "react-native-svg"
function SvgComponent(props) {
return (
<Svg
width={17}
height={17}
{...props}
>
<G>
<Path
id="prefix__a"
d="M16.191 1.027L9.023 8.196l7.168 7.168-.83.83-7.169-7.167-7.168 7.168-.831-.831L7.36 8.196.19 1.027l.832-.83L8.19 7.366 15.359.197z"
/>
</G>
</Svg>
)
}
export default SvgComponent
我編寫了一個新庫,以便能夠使用基於.svg
文件的本機矢量資產,稱為react-native-vector-image 。 它不需要任何自定義 babel 轉換,您可以像處理其他基於位圖的資產一樣使用它,但是將 svg 轉換為原生等效項還有一個額外的步驟(盡管您只需要在添加新資產時運行它) )。
使用您的示例代碼看起來像這樣
import VectorImage from 'react-native-vector-image';
<View>
<VectorImage source={require('./svg/1f604.svg')} />
</View>
使用react-native-svg查看它同時支持 android 和 Ios。
這是基本示例
import * as React from 'react';
import { SvgUri } from 'react-native-svg';
export default () => (
<SvgUri
width="100%"
height="100%"
uri="http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg"
/>
);
如果您想在一個組件中同時使用普通圖像和 svg 圖像,您可以創建一個自定義函數來檢查 url 是否具有 svg 並返回Image組件或SvgUri
const ImageComponent = (Props) => {
const {Istyle, url, mode} = props;
const isSvg = url?.includes('.svg') ?? false;
if (isSvg) {
return <SvgCssUri style={Istyle} uri={defaultAvatar} />;
}
if (!isSvg) {
return <Image style={Istyle} source={{uri: url}} resizeMode={mode} />;
}
};
//let testURl = "https://avatars.dicebear.com/api/male/john.svg"
在兩個平台上對我都有效的最佳解決方案是https://github.com/seekshiva/react-native-remote-svg 。
我還使用https://github.com/react-native-svg/react-native-svg進行了條件渲染,以便在兩個平台上都獲得最佳結果,因為 Android 存在一個已知問題,如此處所述https://stackoverflow .com/a/54182426/4934132 。
以防萬一我有 ErrorBoundry 來覆蓋異常。
它看起來像這樣:
<ErrorBoundary
FallbackComponent={error => ErrorFallback(error)}
onReset={() => {
// reset the state of your app so the error doesn't happen again
}}
onError={myErrorHandler}
>
{Platform.OS === 'ios' ?
<SvgCssUri width="100%" height="100%" uri={url} />
:
<Image
source={{ uri: url }}
style={{ width: "100%", height: '100%' }}
/>
}
</ErrorBoundary>
2022 年對我有用的方法,適用於仍然堅持此問題的任何人,反應本機版本0.63.4,反應本機 svg版本 ^12.1.0,您也可以將此方法用於其他版本,但請務必檢查首先是圖書館的文檔:
通過運行這個命令來安裝react-native-svg-transformer
yarn add react-native-svg-transformer --dev
或者使用 npm 如果你喜歡npm i react-native-svg react-native-svg-transformer --save-dev
通過運行yarn add babel-plugin-inline-import --dev
安裝babel-plugin-inline-import
您需要更新您的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'), getTransformOptions: async () => ({ transform: { experimentalImportSupport: false, inlineRequires: false } }) }, resolver: { assetExts: assetExts.filter(ext => ext !== 'svg'), sourceExts: [...sourceExts, 'svg'] } }; })();
確保將您的 svg 文件導入到您的組件中,如下所示: import CreditCard from '../assets/CreditCard';
請注意我沒有將.svg
文件擴展名添加到導入中,這是因為它在運行時給了我這個錯誤view config getter callback react-native-svg
但刪除它似乎使它運行順利。 您可以通過這種方式將文件添加為 jsx 元素,例如<CreditCard />
。
最后通過在 mac 上使用^Ctrl + C
停止它來重新啟動您的打包程序,然后使用此命令重新啟動它yarn start:dev --reset-cache
並再次安裝該應用程序。
您可以嘗試使用https:\/\/svg2jsx.herokuapp.com\/<\/a>將 .svg 圖像轉換為 JSX
然后導入它,例如import open from "..\/..\/..\/..\/assets\/SVGFile";<\/code>
<\/li>
最后添加<SvgXml xml={open} scaleX={2} scaleY={2} width={20} height={20} \/><\/code>
<\/li><\/ul> 確保安裝,yarn add react-native-svg
一切順利!
如果有人在 2022 年遇到此錯誤,以下是對我有用的解決方案:
安裝 react-native-svg-transformer :
yarn add react-native-svg-transformer --dev
或使用 npm
npm install react-native-svg-transformer --save-dev
安裝 react-native-svg :
yarn add react-native-svg
或使用 npm
npm install react-native-svg --save
將您的 metro.config.js 文件更新為如下所示:
// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require('expo/metro-config');
module.exports = (() => {
const {
resolver: {
sourceExts,
assetExts
}
} = getDefaultConfig(__dirname);
return {
transformer: {
babelTransformerPath: require.resolve("react-native-svg-transformer")
},
resolver: {
assetExts: assetExts.filter(ext => ext !== "svg"),
sourceExts: [...sourceExts, "svg"]
}};
})();
svg
圖像,如下所示:import {View} from 'react-native';
import SvgImage from './path/to/svg/file.svg';
function MyComponent(){
return (
<View>
<SvgImage />
</View>
)
}
如果您將 React Native 與 TypeScript 一起使用,這里是分步解決方案:
1.安裝react-native-svg
npm install react-native-svg
或者
yarn add react-native-svg
2.鏈接本機代碼
cd ios && pod install
3.安裝react-native-svg-transformer
npm install --save-dev react-native-svg-transformer
或者
yarn add --dev react-native-svg-transformer
4.配置react native packager
對於 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")
},
resolver: {
assetExts: assetExts.filter(ext => ext !== "svg"),
sourceExts: [...sourceExts, "svg"]
}
};
})();
這就是我合並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'),
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
resolver: {
assetExts: assetExts.filter((ext) => ext !== 'svg'),
sourceExts: [...sourceExts, 'svg'],
},
}
})()
5、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;
}
6.用法
...
import LogSvg from '../assets/images/Logo.svg'
export function LandingScreen(): JSX.Element {
...
return (
<View style={style.mainContainer}>
<LogSvg style={style.logoContainer} />
</View>
)
}
...
請參閱我的教程 ,了解如何將SVG圖標添加到React Native應用程序。
所有這些解決方案都非常可怕。 只需將您的 SVG 轉換為 PNG 並使用 vanilla <Image/>
組件。 react-native 仍然不支持Image
組件中的 SVG 圖像這一事實是一個笑話。 你永遠不應該為這樣一個簡單的任務安裝額外的庫。 使用https://svgtopng.com/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.