怎样在React Native上显示SVG文件？

14 浏览
0 Comments

怎样在React Native上显示SVG文件？

我想展示svg文件（我有很多svg图片），但我找不到展示的方法。我尝试使用react-native-svg的Image和Use组件，但它们不能使用。我还尝试使用本地方式，但这非常难以展示SVG图片。

示例代码：

import Svg, {
  Use,
  Image,
} from 'react-native-svg';

此外，我知道react native基本上不支持SVG，但我认为有人用巧妙的方式解决了这个问题（使用/不使用react-native-svg）。

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

我在这里发布了另一种解决方案（react-native-vector-icons）。这种方法使用矢量字体（来自SVG）而不是SVG文件。PS：在 react-native 中处理 SVG 的最佳方法是 react-native-vector-icons，它也可以在 iOS 和 android 中使用。您将能够更改矢量图标的颜色和大小。

如果您想直接将SVG插入应用程序中，则可以尝试第三方库：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 () => (
  
);

0
0 Comments

我使用了以下解决方案:

  1. 使用https://svg2jsx.herokuapp.com/将.svg图像转换为JSX
  2. 使用https://react-svgr.com/playground/?native=true将JSX转换为react-native-svg组件(请确保选中 "React Native" 复选框)
0