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

Svg dosyalarını göstermek istiyorum (bir sürü svg resmim var) ama göstermenin yolunu bulamadığım şeyi. React-native-svg'nin Image ve Use bileşenlerini kullanmayı denedim, ancak bununla çalışmıyorlar. Bunu yerel yolla yapmaya çalıştım ama sadece svg görüntüsünü göstermek gerçekten 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, yerel tepkimenin temelde svg'yi desteklemediğini biliyorum, ancak birinin bu sorunu zor bir şekilde çözdüğünü düşünüyorum (react-native-svg ile / olmadan)

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

1. Dönüştürme .svgile JSX görüntüyü https://svg2jsx.herokuapp.com/
2. JSX'i https://svgr.now.sh/react-native-svg ile bileşene dönüştürün ("React Native onay kutusunu işaretleyin)

Burada başka bir çözüm yayınladım. React yerel bir uygulamaya bir vektör (svg) grafiği eklemek için en iyi yaklaşım olan bu yaklaşım, bir svg dosyası yerine bir vektör yazı tipi (svg'den) kullanır. Not: iOS ve android'de harika çalışıyor ve ayrıca vektör simgenizin rengini ve boyutunu da değiştirebilirsiniz.

Doğrudan uygulamanıza bir svg eklemek istiyorsanız, 3. taraf kitaplığı deneyebilirsiniz: react-native-svg. Github'da 3k'den fazla yıldızla en iyi yaklaşımlardan biridir.

• Yüklemek:
  • npm tepki veriyorum-native-svg
  • npm tepki veriyorum-native-svg-uri
• yerel bağlantı:
  • react-native link react-native-svg

Ve işte bir örnek:

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

Birçok yolu ve kitaplığı denedikten sonra ( Glyphs veya bu öğretici ile ) yeni bir yazı tipi oluşturmaya ve SVG dosyalarımı buna eklemeye, ardından özel yazı tipimle "Metin" bileşenini kullanmaya karar verdim.

Umarım bu, react-native'da SVG ile aynı sorunu yaşayan herkese yardımcı olur.

React-native-svg-transformer'ı yükleyin

npm tepki veriyorum-native-svg-transformer --save-dev

SVG'yi aşağıdaki gibi kullanıyorum ve iyi çalışıyor

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

renderda

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

Ben de aynı sorunu yaşadım. Bulduğum bu çözümü kullanıyorum: React Native ekran SVG'sini bir dosyadan

Mükemmel değil ve bugün tekrar ziyaret ediyorum çünkü Android'de çok daha kötü performans gösteriyor.

Https://github.com/kristerkari/react-native-svg-transformer'ı kullanın

Bu pakette .svgdosyaların React Native v0.57 ve daha düşük sürümlerde desteklenmediğinden bahsedilmektedir, bu nedenle .svgxsvg dosyaları için uzantı kullanın .

Web veya react-native-web için https://www.npmjs.com/package/@svgr/webpack kullanın

Svg dosyalarını react-native-svg-urireact-native 0.57 ve daha düşük sürümleri kullanarak işlemek için , aşağıdaki dosyaları kök projenize eklemeniz gerekir.

Not: uzantıyı şu svgşekilde değiştirin:svgx

1. adım: dosyayı transformer.jsprojenin köküne ekleyin

// 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. adım: rn-cli.config.jsprojenin köküne ekleyin

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

Yukarıda belirtilen çözümler üretim uygulamalarında da işe yarayacak ✅

Yukarıdaki tüm çözümleri ve yığının dışındaki diğer çözümleri denedim ve hiçbiri benim için çalışmıyor. nihayet, uzun araştırmalardan sonra, fuar projem için bir çözüm buldum.

Expo'da çalışmasına ihtiyacınız varsa, geçici bir çözüm https://react-svgr.com/playground/ kullanmak ve prop'ların yayılmasını SVG kökü yerine bir G öğesine taşımak olabilir :

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

Not: Svg, android sürüm sürümleri için çalışmaz, bu nedenle android için düşünmeyin. Android için yalnızca hata ayıklama modunda çalışacaktır. Ancak ios için iyi çalışıyor.

Https://github.com/vault-development/react-native-svg-uri'yi kullanın

Yüklemek

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

Kullanım

import SvgUri from 'react-native-svg-uri';


<SvgUri source={require('./path_to_image/image.svg')} />

Bu iki eklentiyi kullanıyorum,

1. [react-native-svg] https://github.com/react-native-community/react-native-svg )
2. [react-native-svg-transformer] https://github.com/kristerkari/react-native-svg-transformer )

Öncelikle bu eklentiyi kurmanız gerekiyor. Bundan sonra metro.config.js kodunuzu bu kodla değiştirmeniz gerekir.

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

Daha fazla ayrıntı için bu bağlantıyı ziyaret edebilirsiniz

• https://medium.com/game-development-stuff/how-to-import-svgs-on-react-native-dc76b56403ba
• https://medium.com/@majirosstefan/the-svgs-inside-react-native-0-61-5-and-storybook-566bcd43ba94

herhangi bir SVG'yi bir bileşene dönüştürebilir ve yeniden kullanılabilir hale getirebilirsiniz.

işte bunu yapmanın en kolay yolu için cevabım

SVG'den bileşene

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

Tüm bu çözümler kesinlikle korkunç. SVG'nizi bir PNG'ye dönüştürün ve vanilya <Image/>bileşenini kullanın . React-native'nin Imagebileşendeki SVG görüntülerini hala desteklememesi bir şakadır. Bu kadar basit bir görev için asla ek bir kitaplık kurmamalısınız. Https://svgtopng.com/ kullanın