React Native에서 SVG 파일을 표시하는 방법은 무엇입니까?

React Native에서 SVG 파일을 표시하는 방법은 무엇입니까?

---

나는 svg를 보여주고 싶지만 (나는 많은 svg 이미지를 가지고 있다고) 보여줄 방법을 파일 수 없습니다. react-native-svg 의 이미지 및 사용 구성 요소 를 사용하려고 시도했지만 작동하지 않았습니다. 방식 방식으로 시도했지만 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를 지원하지 않습니다.

---

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

1. https://svg2jsx.herokuapp.com/ 을 사용하여 .svg 이미지를 JSX로 변환
2. https://svgr.now.sh/ 를 사용하여 JSX를 react-native-svg구성 요소로 변환합니다 ( "React Native 선택 선택).

---

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

이것이 모든 사람에게 도움이되기를 바랍니다.

---

나는 여기 에 벡터 (svg) 그래프를 반응 방식 응용 프로그램에 삽입하는 가장 좋은 방법 인 또 다른 솔루션을 게시했습니다 .이 방법은 svg 대신 벡터 글꼴 (svg에서)을 사용합니다. 추신 : iOS 및 Android에서 잘 작동하며 벡터 아이콘의 색상과 크기를 설명 수도 있습니다.

SVG를 앱에 직접 삽입 라이브러리 인 react-native-svg를 볼 수 있습니다. github에서 3k 이상의 별을 사용하는 것은 최고의 접근 방식 중 하나입니다.

• 설치 :
  • npm i react-native-svg
  • npm i react-native-svg-uri
• 외장에 연결 :
  • 반응 방식 링크 react-native-svg

다음은 샘플입니다.

import * as React from 'react';
import SvgUri from 'react-native-svg-uri';
import testSvg from './test.svg';
export default () => (
  <SvgUri
    width="200"
    height="200"
    svgXmlData={testSvg}
  />
);

---

나는 같은 문제가 있었다. 나는이 솔루션을 사용하고 있습니다 : React Native display SVG from a file

완벽하지 않습니다, Android에서 성능이 훨씬 더 나쁘기 때문에 오늘 다시 방문합니다.

---

https://github.com/kristerkari/react-native-svg-transformer 사용

이 패키지에서는 .svgReact Native v0.57 이하에서 지원되지 않는다고 언급 되어 있으므로 .svgxsvg 파일의 파일을 사용 합니다.

웹 또는 react-native-web의 경우 https://www.npmjs.com/package/@svgr/webpack을 사용 합니다.

---

react-native-svg-urireact-native 버전 0.57 이하를 사용하여 svg 파일을 다음 파일을 추가해야합니다.

참고 : svg를 다음으로 변경하십시오.svgx

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

2 단계 : rn-cli.config.js프로젝트의 루트에 추가

module.exports = {
    getTransformModulePath() {
      return require.resolve("./transformer");
    },
    getSourceExts() {
      return [/* "ts", "tsx", */ "svgx"];
    }
  };

묵직한 작동합니다 .✅

---

설치를 반응 압축 -SVG- 변압기를

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

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

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

회의 중

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

---

참고 : Svg는 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')} />

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