如何在 React Native 中使用 SVG？

如何解决如何在 React Native 中使用 SVG？

我正在尝试在 react native 中使用 bootstrap 图标，但我找不到任何关于如何在 react-native 中渲染 SVG 的有用方法。有人知道怎么做吗？

解决方法

要在 React Native 中添加 SVG，您可以使用 react-native-svg

安装：

纱线添加 react-native-svg

示例：

import Svg,{
  Circle,Ellipse,G,Text,TSpan,TextPath,Path,Polygon,Polyline,Line,Rect,Use,Image,Symbol,Defs,LinearGradient,RadialGradient,Stop,ClipPath,Pattern,Mask,} from 'react-native-svg';

/* Use this if you are using Expo
import * as Svg from 'react-native-svg';
const { Circle,Rect } = Svg;
*/

import React from 'react';
import { View,StyleSheet } from 'react-native';

export default class SvgExample extends React.Component {
  render() {
    return (
      <View
        style={[
          StyleSheet.absoluteFill,{ alignItems: 'center',justifyContent: 'center' },]}
      >
        <Svg height="50%" width="50%" viewBox="0 0 100 100">
          <Circle
            cx="50"
            cy="50"
            r="45"
            stroke="blue"
            strokeWidth="2.5"
            fill="green"
          />
          <Rect
            x="15"
            y="15"
            width="70"
            height="70"
            stroke="red"
            strokeWidth="2"
            fill="yellow"
          />
        </Svg>
      </View>
    );
  }
}

或者您想将 svg 导入您的应用程序使用：react-native-svg-transformer

示例：

import Logo from "./logo.svg";

<Logo width={120} height={40} />

但是如果你想要一个图标库，你可以使用：react-native-vector-icons

还有这个目录：React Native Vector Icons directory

,

我刚刚找到了一种对我有用的简单方法来解决这个问题。

我正在使用 Expo 并且安装了 react-native-svg。请注意，这与从 SvgUri 导入 react-native-svg-uri 不同。那是一个不同的图书馆。

import { SvgUri } from "react-native-svg";

<SvgUri
  uri="https://example.com/uploads/apple.svg"
  width="40%"
  height="40%"
/>