source

리액트 네이티브에서 SVG 파일을 표시하는 방법?

ittop 2023. 9. 14. 23:37

리액트 네이티브에서 SVG 파일을 표시하는 방법?

svg 파일(svg 이미지가 많이 있습니다)을 보여주고 싶은데 보여줄 방법을 찾지 못했습니다.react-native-svg의 Image and Use 구성요소를 사용하려고 했는데 작동이 되지 않습니다.그리고 저는 그걸 네이티브 방식으로 하려고 했는데 svg 이미지만 보여주는 것은 정말 힘든 작업입니다.

예제 코드:

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

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

또한 반응 네이티브가 기본적으로 svg를 지원하지 않는다는 것을 알고 있지만 누군가가 까다로운 방법으로 이 문제를 해결했다고 생각합니다(반응 네이티브-svg 포함/포함).

다음 솔루션을 사용했습니다.

변환.svghttps://svg2jsx.herokuapp.com/ 을 사용하여 JSX로 이미지 전송
를 JSX로 으로 를react-native-svg구성 요소에 https://react-svgr.com/playground/ ?fault=true가 포함되어 있습니다("React Native" 확인란이 선택되어 있는지 확인하십시오).

여기에 다른 솔루션(반응-네이티브-벡터-아이콘)을 올렸습니다.이 접근 방식은 SVG 파일 대신에 (SVG에서) 벡터 글꼴을 사용합니다.PS: 리액트 네이티브-벡터-아이콘은 리액트 네이티브에서 SVG를 다루는 가장 좋은 접근법이며 iOS와 안드로이드에서도 작동합니다.벡터 아이콘의 색상과 크기를 변경할 수 있습니다.

앱에 직접 svg를 삽입하고 싶다면 제3자 라이브러리인 react-native-svg를 사용해 볼 수 있습니다.깃허브에 3k 이상의 별이 있는 이것은 가장 좋은 접근 방법 중 하나입니다.

Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ,npm:

그런 다음 native using에 연결합니다.

react-native link react-native-svg

다음과 같은 예:

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

반응형 네이티브-svg-트랜스포머 설치

npm i react-despect-despector --save-dev

다음과 같이 SVG를 사용하고 있는데 잘 작동합니다.

import LOGOSVG from "assets/svg/logo.svg"

대자로

<View>
  <LOGOSVG 
    width="100%"
    height="70%"
  />
</View>

저는 위의 모든 솔루션과 스택 외의 다른 솔루션을 시도해 보았지만 저를 위해 일하는 것은 없었습니다. 마침내 오랜 연구 끝에 엑스포 프로젝트를 위한 하나의 솔루션을 찾았습니다.

Expo에서 작동하려면 https://react-svgr.com/playground/ 을 사용하여 다음과 같이 SVG 루트 대신 G 요소로 소품을 이동하는 것이 한 가지 해결책이 될 수 있습니다.

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

2022년에 아직도 이 문제를 해결하지 못하고 있는 모든 사람들에게 효과가 있는 방법, 리액트 네이티브 버전 0.63.4, 리액트 네이티브-svg 버전 ^12.1.0, 다른 버전에서도 이 방법을 사용할 수 있지만 라이브러리에 대한 문서를 항상 확인하십시오.

설치 react-native-svg-transformer 명령을 이을면면을이ysgdyarn add react-native-svg-transformer --dev이 더 좋다면 npm을 사용하는 도 좋습니다.npm i react-native-svg react-native-svg-transformer --save-dev
설치 babel-plugin-inline-import다를yarn add babel-plugin-inline-import --dev
당신은 당신의 를 해야 .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 과 을 svg 로 로 을 과 import CreditCard from '../assets/CreditCard';제가 어떻게 추가하지 않는지 참고해주세요..svg, 는 Import에한일자이를은고기다게고기다t를eertegn한이oes,ts에view config getter callback react-native-svg작동을 하는데 제거를 하면 원활하게 작동이 되는 것 같습니다.할수t다수할로e런uxassrtydsen로을xe<CreditCard />.
마지막으로 다음을 사용하여 패키지를 중지하여 다시 시작합니다.^Ctrl + C이을여시다다s이cnd을t여hnnt .yarn start:dev --reset-cache앱을 다시 설치합니다.

여러 가지 방법과 라이브러리를 시도한 끝에 새로운 글꼴(글리프 또는 이 자습서로)을 만들고 여기에 SVG 파일을 추가한 다음 사용자 지정 글꼴과 함께 "텍스트" 구성 요소를 사용하기로 결정했습니다.

이것이 반응 네이티브에서 SVG와 같은 문제를 가진 사람에게 도움이 되기를 바랍니다.

간단한 방법으로 할 수 있습니다.

우선 설치를 해야 합니다.

npm install -s react-limit-jpg
반응-반응 링크 반응-반응-반응-반응-반응g
npm install -s react-despons-despons-despector

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

그 후, 당신은 당신의 루트 디렉토리에 declarations.d.js라는 이름을 가진 새로운 파일을 만들어야 합니다. 코드는 다음과 같습니다.

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%"/>

SVG는 네이티브 애플리케이션에서 직접 지원하지 않습니다.타사 모듈의 도움이 필요한 정보를 표시하기 위해서는

다음 절차를 따르세요.

step 1. 반응-native-svg 및 반응-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단계 SVG 파일을 React 구성요소처럼 사용

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

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

저도 같은 문제가 있었습니다.찾은 솔루션을 사용하고 있습니다.파일에서 네이티브 디스플레이 SVG 반응

완벽하지는 않고, 안드로이드에서 성능이 훨씬 떨어지기 때문에 오늘 다시 방문합니다.

https://github.com/kristerkari/react-native-svg-transformer 를 사용합니다.

에는 에는 이 되어 되어 이 에는 .svg Native React Native v0.57는지로다을이다을t는로s지이ee ..svgxfilesvg의의 입니다.

웹 또는 반응-반응-반응-반응-반응-반응-웹의 경우 https://www.npmjs.com/package/ @jpgr/webpack을 사용합니다.

다음을 사용하여 svg 파일을 렌더링하려면 다음과 같이 하십시오.react-native-svg-uri 0 project react-procession version 0.57에 .

확장자 : svgsvgx

: 1 하기 : `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를 구성 요소로 변환하여 재사용할 수 있습니다.

여기 당신이 할 수 있는 가장 쉬운 방법에 대한 나의 대답이 있습니다.

SVG와 구성요소 연결

반응형 프로젝트에서 svg를 사용하는 것은 웹에서 사용하는 것만큼 간단하지는 않지만, 그렇게 어렵지도 않습니다.

위의 많은 답변들은 제가 보기에는 복잡합니다.그래서 여기 제가 사용하고 좋아하는 솔루션이 있습니다.

react native는 svg 파일 형식을 직접 지원하지 않기 때문에 몇 가지 절차를 따라야 작동할 수 있습니다.

1. 반응-native-svg 설치

 npm install react-native-svg --save

이 패키지는 svg 파일을 렌더링하는 데 도움이 될 것입니다.

2. 반응형 네이티브-svg-트랜스포머 설치

npm install react-native-svg-transformer --save

이 패키지는 당신의 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에게 감사드립니다.

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

TypeScript와 함께 React Native를 사용하는 경우 다음과 같은 단계별 솔루션을 제공합니다.

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. 반응형 패키지 구성

반응 네이티브 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를 하는 을 의 를 의 에 이것을 추가해야 합니다.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는 안드로이드 릴리즈 버전에서는 작동하지 않으므로 안드로이드는 고려하지 마십시오.디버그 모드에서 안드로이드에서만 작동합니다.하지만 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')} />

저는 이 플러그인 두개를 사용하고,

[http-http-japg] https://github.com/react-native-community/react-native-svg)
[반응-반응-반응-반응-반응기-반응기-반응기-반응기] https://github.com/kristerkari/react-native-svg-transformer)

우선 그 플러그인을 설치해야 합니다.그런 다음 이 코드로 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당신의 프로젝트에.
https://react-svgr.com/ 을 열고 놀이터로 이동한 후 반응 네이티브를 선택합니다.
SVG 코드를 복사해서 붙여넣고 출력 코드를 사용합니다.

Ex:- 제가 가지고 있는 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반응-반응-반응-반응-반응-반응-이미지라고 불리는 파일입니다.사용자 지정 바벨 변환이 필요하지 않고 다른 비트맵 기반 자산처럼 사용할 수 있지만 svg를 네이티브 등가물로 변환하는 데는 추가적인 단계가 있습니다(다만 새 자산을 추가할 때만 실행하면 됩니다).

당신의 예를 사용하면 코드는 이렇게 보일 것입니다.

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

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

https://svg2jsx.herokuapp.com/ 을 사용하여 .jpg 이미지를 JSX로 변환해 보십시오.

그런 다음 assest/SVGFile.js에 JSX 코드를 저장합니다.
다음 : :import open from "../../../../assets/SVGFile";
마지막으로 추가합니다.<SvgXml xml={open} scaleX={2} scaleY={2} width={20} height={20} />

반드시 설치, 원사 덧셈 반응성 네이티브-svg

좋은 일만 가득하시길요!

2022년에 누군가가 이 버그에 걸려있을 경우를 대비하여, 제게 도움이 된 해결책은 다음과 같습니다.

반응형 네이티브-svg-트랜스포머 설치:
yarn add react-native-svg-transformer --dev
합니다.
npm install react-native-svg-transformer --save-dev
react-native-svg 설치:
yarn add react-native-svg
합니다.
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>
    )
}

사용하려고 합니다.SvgCssUri그리고 그것은 동작한다.

import { SvgCssUri } from 'react-native-svg';
...
...
...
<SvgCssUri 
style={{height: 100, width: 100}} 
uri={"http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg"} />

두 플랫폼 모두에서 제게 가장 적합한 솔루션은 https://github.com/seekshiva/react-native-remote-svg 입니다.

두 플랫폼 모두에서 최상의 결과를 얻기 위해 https://github.com/react-native-svg/react-native-svg 을 사용하여 조건부 렌더링을 추가로 수행했습니다. 여기 https://stackoverflow.com/a/54182426/4934132 에 명시된 것처럼 Android에 대한 알 수 있는 문제가 있기 때문입니다.

만일 내가 가지고 있을 경우에.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>

react-native-svg를 사용하면 안드로이드와 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"

한가지 방법은 PNG로 변환해서 사용하는 것입니다.일반적으로 보다 안정적으로 작동합니다.

언급URL : https://stackoverflow.com/questions/38830568/how-to-show-svg-file-on-react-native

'source' 카테고리의 다른 글

파워셸 스크립트를 백그라운드에서 분당 한 번 실행 (0)	2023.09.14
Pandas value_counts()에서 값 추출 (0)	2023.09.14
외부 키가 다른 외부 키를 참조할 수 있습니까? (0)	2023.09.14
jQuery로 쿠키 만들기, 읽기, 지우기 (0)	2023.09.14
XML 렌더링 오류 Android 미리보기 N (0)	2023.09.14

현재글리액트 네이티브에서 SVG 파일을 표시하는 방법?

각종 프로그래밍 정보를 다루는 블로그입니다.

Excel, angularJS, sql-server, Git, mysql, PowerShell, jQuery, angular, C, MongoDB, Oracle, Android, wordpress, asp.net, MariaDB, Spring-boot, bash, reactjs, Ajax, python,

Today :
Yesterday :

ittop

리액트 네이티브에서 SVG 파일을 표시하는 방법?

리액트 네이티브에서 SVG 파일을 표시하는 방법?

우선 설치를 해야 합니다.

그러면 metro.config.js 파일에 다음 코드를 추가해야 합니다.

그 후, 당신은 당신의 루트 디렉토리에 declarations.d.js라는 이름을 가진 새로운 파일을 만들어야 합니다. 코드는 다음과 같습니다.

: 1 하기 : `transformer.js`를 투영하다

: 추가 : `rn-cli.config.js`를 투영하다

'source' 카테고리의 다른 글

'source'의 다른글

티스토리툴바

« 2024/10 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

리액트 네이티브에서 SVG 파일을 표시하는 방법?

리액트 네이티브에서 SVG 파일을 표시하는 방법?

우선 설치를 해야 합니다.

그러면 metro.config.js 파일에 다음 코드를 추가해야 합니다.

그 후, 당신은 당신의 루트 디렉토리에 declarations.d.js라는 이름을 가진 새로운 파일을 만들어야 합니다. 코드는 다음과 같습니다.

: 1 하기 : transformer.js를 투영하다

: 추가 : rn-cli.config.js를 투영하다

'source' 카테고리의 다른 글

'source'의 다른글

관련글

티스토리툴바

: 1 하기 : `transformer.js`를 투영하다

: 추가 : `rn-cli.config.js`를 투영하다