Fatal编程技术网
  • javascript/
  • Javascript 如何在本机上显示SVG文件？

Javascript 如何在本机上显示SVG文件？

javascript svg react-native

Javascript 如何在本机上显示SVG文件？,javascript,svg,react-native,Javascript,Svg,React Native,我想显示svg文件（我有一堆svg图像），但我找不到显示的方法。我尝试使用图像和使用的组件，但它们无法使用。我试着用native way来实现这一点，但只显示svg图像确实很难 示例代码： import Svg, { Use, Image, } from 'react-native-svg'; <View> <Svg width="80" height="80"> <Image href={require('./svg/1f604.svg')

我想显示svg文件（我有一堆svg图像），但我找不到显示的方法。我尝试使用图像和使用的组件，但它们无法使用。我试着用native way来实现这一点，但只显示svg图像确实很难

示例代码：

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

<View>
  <Svg width="80" height="80">
     <Image href={require('./svg/1f604.svg')} />
  </SvgRn>
</View>

导入Svg{
使用，
形象,，
}来自“react native svg”；
另外，我知道react native基本上不支持svg，但我认为有人用巧妙的方法解决了这个问题（使用/不使用react native svg）

我也遇到了同样的问题。我正在使用我发现的解决方案：

它并不完美，我今天再次访问它，因为它在Android上的性能要差得多。

在尝试了许多方法和库之后，我决定创建一种新字体（使用或此），并将我的SVG文件添加到其中，然后将“文本”组件与我的自定义字体一起使用。


希望这能帮助任何在react-native中遇到与SVG相同问题的人。

如果您想将SVG直接插入应用程序，可以尝试使用第三方库：react-native SVG。github拥有超过3k颗星星，这是最好的方法之一

使用
npm
安装其中任何一个：

然后使用

react-native-link react-native-svg
例如：

import*as React from'React'；
从“react native svg uri”导入SvgUri；//SVG包
从“./test.svg”；/”导入testSvgSVG文件
导出默认值（）=>(
);
我发布了另一个解决方案。这种方法使用矢量字体（来自SVG）代替SVG文件。
PS：它在ios和android中非常有效，您还可以更改矢量图标的颜色和大小。

我使用了以下解决方案：

  • 使用将
    .svg
    图像转换为JSX
  • 使用将JSX转换为
    react native svg
    组件（选中“react native”复选框）
    • 注意：SVG不适用于Android发布版本，所以不要考虑Android。它只在调试模式下运行Android。但是它对iOS来说很好。

    使用

    安装

    npm install react-native-svg-uri --save
react-native link react-native-svg # not react-native-svg-uri
    用法

    从'react native svg uri'导入SvgUri；
    使用

    在本软件包中提到，React Native v0.57及更低版本不支持
    .svg
    文件，因此对svg文件使用
    .svgx
    扩展名

    用于web或本地web使用

    要使用react native version 0.57及更低版本的
    react native svg uri
    呈现svg文件，需要将以下文件添加到根项目中

    注意：将扩展名
    svg
    更改为
    svgx

    步骤1：将文件
    transformer.js
    添加到项目的根目录 
    //文件：transformer.js
const cleanupSvg=require（'./cleanupSvg'）；
const upstreamTransformer=需要（“地铁/src/变压器”）；
//const typescriptTransformer=require（“react native typescript transformer”）；
//常量typescriptExtensions=[“ts”，“tsx”]；
常量svgExtensions=[“svgx”]
//函数cleanUpSvg（文本）{
//text=text.replace（/width=“（[#0-9]+）px”/gi，”；
//text=text.replace（/height=“（[#0-9]+）px”/gi，”；
//返回文本；
// }
函数fixtrenderingBugs（内容）{
//content=cleanUpSvg（content）；//cleanUpSvg从svg中删除宽度和高度属性
返回“module.exports=`+content+`”；
}
module.exports.transform=函数（{src，filename，options}）{
//if（typescriptExtensions.some（ext=>filename.endsWith（“.”+ext）））{
//返回typescriptTransformer.transform（{src，filename，options}）
// }
if（svgExtensions.some（ext=>filename.endsWith（“.”+ext）））{
返回上游变压器.transform({
src:fixRenderingBugs（src），
文件名，
选择权
})
}
返回upstreamTransformer.transform（{src，filename，options}）；
}
    步骤2：将
    rn cli.config.js
    添加到项目的根目录 上述解决方案也适用于生产应用程序✅

    安装

    npm i react本机svg转换器--保存开发

    我使用SVG，如下所示，效果很好

    import LOGOSVG from "assets/svg/logo.svg"
    渲染中

    <View>
  <LOGOSVG 
    width="100%"
    height="70%"
  />
</View>
    所有这些解决方案都非常糟糕。只要将您的SVG转换为PNG并使用vanilla
    组件即可。react native仍然不支持
    Image
    组件中的SVG图像，这是一个笑话。您不应该为这么简单的任务安装额外的库。使用我已经尝试了上述所有解决方案最后，经过长期的研究，我为我的世博会项目找到了一个解决方案
    
如果您需要它在expo中工作，一个解决方法可能是使用并将道具的扩展移动到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" />
  );
}

    

    import*as React from'React'；
从“react native Svg”导入Svg，{G，Path}；
功能SVG组件（道具）{
返回(
);
}
导出默认函数App（）{
返回(
);
}

    我使用这两个插件
    

  • [反应本机svg]）
    • 

  • [
（本机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"]
    }
  };
})();

    
有关更多详细信息，您可以访问此链接
    

      

    • 

    • 

    您可以将任何SVG转换为组件并使其可重用
    
这是我的答案，你可以用最简单的方法来做
    

    从“React”导入React
从“react native svg uri”导入SvgUri；
导出默认函数Splash（）{
返回(
{/*如果svg文件存储在本地*/}
{/*如果svg联机*/}
正文
)
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“中心”
},
标识文字：{
尺码：50
}
});

    您可以在我们这里执行此操作

    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"]
    }
  };
})();

    

    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
  }
});

    

    <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

    

    import VectorImage from 'react-native-vector-image';

<View>
  <VectorImage source={require('./svg/1f604.svg')} />
</View>

    

    npm i react-native-svg react-native-svg-transformer

    

    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"]    
        }};
})();

    

    import Invest from '../assets/invest.svg'; // import SVG

return (
        <View>
            <Invest /> // Use SVG as component
        </View>
    )