javascript - React Native'de SVG dosyası nasıl gösterilir?

SVG dosyalarını göstermek istiyorum (bir sürü SVG görüntüm var) ama gösterebilmenin yolunu bulamadım. react-native-svg bileşenlerinin Image ve Use bileşenlerini kullanmayı denedim ama bunlar bununla çalışmıyor. Ve bunu yerel (native) yolla yapmayı denedim ama sadece SVG görüntüsünü göstermek gerçekten çok zor bir iş.

Örnek kod:

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

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

Ayrıca react native'in temelde svg'yi desteklemediğini biliyorum ama sanırım biri bu sorunu kurnaz bir yöntemle (react-native-svg ile/olmadan) çözmüş.

Cevap #1

Aşağıdaki çözümü kullandım:

.svg görüntüsünü https://svg2jsx.herokuapp.com/ ile JSX'e dönüştürün
JSX'i react-native-svg bileşenine dönüştürmek için https://react-svgr.com/playground/?native=true sitesini kullanın ("React Native" onay kutusunun işaretli olduğundan emin olun)

Cevap #2

react-native-svg-transformer yükleyin

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

Aşağıdaki şekilde SVG kullanıyorum ve iyi çalışıyor

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

renderda

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

Cevap #3

Buraya başka bir çözüm (react-native-vector-icons) ekledim. Bu yaklaşım, bir SVG dosyası yerine bir vektör yazı tipi (SVG'den) kullanıyor. Not: react-native-vector-icons, react-native'de SVG ile başa çıkmanın en iyi yoludur, ayrıca iOS ve Android'de de çalışır. Vektör ikonunuzun rengini ve boyutunu değiştirebileceksiniz.

Eğer bir SVG'yi doğrudan uygulamanıza eklemek istiyorsanız, üçüncü taraf bir kütüphane deneyebilirsiniz: react-native-svg. GitHub'da 3 binden fazla yıldızıyla, en iyi yaklaşımlardan biridir.

Bunlardan herhangi birini npm kullanarak yükleyin:

react-native-svg
react-native-svg-uri

Sonra onu native kullanarak bağla

react-native link react-native-svg

react-native-svg-uri ile bir örnek:

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

Cevap #4

Yukarıdaki tüm çözümleri ve stack dışında diğer çözümleri denedim ve hiçbiri benim için işe yaramadı. Sonunda, uzun araştırmaların ardından, expo projem için bir çözüm buldum.

Eğer bunun expo'da çalışmasını istiyorsanız, bir çözüm yolu https://react-svgr.com/playground/ sitesini kullanmak ve props'ların yayılmasını SVG kök yerine G elementine taşımak olabilir, şu şekilde:

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

Cevap #5

2022 yılında benim için işe yarayan yöntem, hâlâ bu konuda takılıp kalanlar için, react native sürümü 0.63.4, react-native-svg sürümü ^12.1.0, bu yöntemi diğer sürümler için de kullanabilirsiniz ama her zaman önce kütüphane dökümantasyonunu kontrol edin:

Bu komutu çalıştırarak react-native-svg-transformer yükleyin yarn add react-native-svg-transformer --dev veya isterseniz npm kullanarak npm i react-native-svg react-native-svg-transformer --save-dev
yarn add babel-plugin-inline-import --dev komutunu çalıştırarak babel-plugin-inline-import yükleyin
metro.config.js dosyanızı şöyle görünmesi için güncellemeniz gerekiyor:

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 dosyanızı bileşeninize şu şekilde import ettiğinizden emin olun: import CreditCard from '../assets/CreditCard'; Import işlemine .svg dosya uzantısını eklemediğime dikkat edin, çünkü eklediğimde bu hatayı alıyordum view config getter callback react-native-svg çalıştırırken, ancak kaldırmak çalışmasını düzgün hale getiriyor gibi görünüyor. Dosyanızı şu şekilde bir JSX elemanı olarak ekleyebilirsiniz: <CreditCard />.
Son olarak paketleyicinizi durdurmak için mac'te ^Ctrl + C kullanarak durdurun ve ardından bu komutla tekrar başlatın yarn start:dev --reset-cache ve uygulamayı tekrar yükleyin.

Cevap #6

Bunu basit bir şekilde yapabilirsiniz

öncelikle, kurulumu almanız gerekir,

npm install -s react-native-svg
react-native link react-native-svg
npm install -s react-native-svg-transformer

o zaman, metro.config.js dosyanıza aşağıdaki kodu eklemelisiniz

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

bunun ardından, kök dizininizde declarations.d.js adıyla aşağıdaki kodla yeni bir dosya oluşturmalısınız

declare module "*.svg" {
  import { SvgProps } from "react-native-svg";
  const content: React.FC<SvgProps>;
  export default content;
}

Son olarak, bu önemli bir yöntemdir

import USER from "../../assets/icons/user.svg"

ve, bu jsx içindir

<USER width="100%" height="100%"/>

Cevap #7

Birçok yol ve kütüphane denedikten sonra yeni bir font oluşturup (Glyphs ile veya bu eğitimle) SVG dosyalarımı eklemeye ve ardından özel fontumla "Text" bileşenini kullanmaya karar verdim.

Umarım bu, react-native'de SVG ile aynı sorunu yaşayanlara yardımcı olur.

Cevap #8

SVG, yerel uygulamalarda doğrudan desteklenmez. Bunları görüntülemek için üçüncü taraf modüllerden yardım almamız gerekir.

Lütfen bu adımları izleyin

adım 1. react-native-svg ve react-native-svg-transformer kurun

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

adım 2. Dosya metro.config.js yoksa ekleyin

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

adım 3. SVG dosyasını bir React bileşeni gibi kullanın

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

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