Saya ingin menunjukkan file svg (saya memiliki banyak gambar svg) tetapi hal yang saya tidak dapat menemukan cara untuk menunjukkannya. Saya mencoba menggunakan Image dan Use komponen react-native-svg tetapi mereka tidak bekerja dengan itu. Dan saya mencoba melakukannya dengan cara asli tetapi sangat sulit untuk menunjukkan hanya gambar svg.

Kode contoh:

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

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

Juga saya tahu react native tidak mendukung svg pada dasarnya tetapi saya pikir seseorang memperbaiki masalah ini dengan cara yang rumit (dengan / tanpa react-native-svg)

Saya menggunakan solusi berikut:

1. Ubah .svggambar menjadi JSX dengan https://svg2jsx.herokuapp.com/
2. Ubah JSX menjadi react-native-svgkomponen dengan https://svgr.now.sh/ (centang "kotak centang React Native)

Saya memposting solusi lain di sini Yang merupakan pendekatan terbaik untuk memasukkan grafik vektor (svg) ke dalam aplikasi bereaksi asli , Pendekatan ini menggunakan font vektor (dari svg) dan bukan file svg. PS: Ini berfungsi dengan baik di ios dan android, dan Anda juga dapat mengubah warna dan ukuran ikon vektor Anda.

Jika Anda ingin memasukkan svg langsung ke aplikasi Anda, Anda dapat mencoba perpustakaan pihak ketiga: react-native-svg. Dengan lebih dari 3k bintang di github, ini adalah salah satu pendekatan terbaik.

• Install:
  • npm i react-native-svg
  • npm saya react-native-svg-uri
• tautkan ke native:
  • link react-native react-native-svg

Dan inilah contohnya:

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

Setelah mencoba banyak cara dan pustaka, saya memutuskan untuk membuat font baru (dengan Glyphs atau tutorial ini ) dan menambahkan file SVG saya ke dalamnya, kemudian menggunakan komponen "Teks" dengan font kustom saya.

Semoga ini bisa membantu siapa saja yang memiliki masalah yang sama dengan SVG di react-native.

Pasang react-native-svg-transformer

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

Saya menggunakan SVG sebagai berikut dan berfungsi dengan baik

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

dalam render

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

Saya memiliki masalah yang sama. Saya menggunakan solusi ini yang saya temukan: React Native display SVG from a file

Ini tidak sempurna, dan saya mengunjungi kembali hari ini, karena kinerjanya jauh lebih buruk di Android.

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

Dalam paket ini disebutkan bahwa .svgfile tidak didukung di React Native v0.57 dan lebih rendah jadi gunakan .svgxekstensi untuk file svg.

Untuk web atau react-native-web, gunakan https://www.npmjs.com/package/@svgr/webpack

Untuk merender file svg menggunakan react-native-svg-urireact-native versi 0.57 dan yang lebih rendah, Anda perlu menambahkan file berikut ke proyek root Anda

Catatan: ubah ekstensi svgmenjadisvgx

langkah 1: tambahkan file transformer.jske root proyek

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

langkah 2: tambahkan rn-cli.config.jske root proyek

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

Solusi yang disebutkan di atas akan berfungsi di aplikasi produksi juga ✅

Saya telah mencoba semua solusi di atas dan solusi lain di luar tumpukan dan tidak ada yang berhasil untuk saya. akhirnya, setelah penelitian panjang, saya menemukan satu solusi untuk proyek pameran saya.

Jika Anda membutuhkannya untuk bekerja dalam expo, salah satu solusinya mungkin menggunakan https://react-svgr.com/playground/ dan memindahkan penyebaran props ke elemen G alih-alih root SVG seperti ini:

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

Catatan: Svg tidak berfungsi untuk versi rilis android jadi jangan pertimbangkan untuk android. Ini akan bekerja untuk android dalam mode debug saja. Tapi itu berfungsi dengan baik untuk iOS.

Gunakan https://github.com/vault-development/react-native-svg-uri

Install

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

Pemakaian

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


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

Saya menggunakan dua plugin ini,

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 )

Pertama-tama, Anda perlu menginstal plugin itu. Setelah itu Anda perlu mengubah metro.config.js Anda, dengan kode ini.

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

Untuk lebih jelasnya, Anda dapat mengunjungi tautan ini

• 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

Anda dapat mengonversi SVG apa pun menjadi komponen dan membuatnya dapat digunakan kembali.

inilah jawaban saya untuk cara termudah yang dapat Anda lakukan

SVG ke komponen

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

Anda dapat melakukannya dengan cara yang sederhana

pertama, Anda harus melakukan instalasi,

1. npm install -s react-native-svg
2. link react-native react-native-svg
3. npm install -s react-native-svg-transformer

kemudian, Anda harus menambahkan kode berikut di file metro.config.js Anda

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

setelah itu, Anda harus membuat file baru di direktori root Anda dengan nama declarations.d.js dengan kode berikut

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

Terakhir, Ini adalah import mathod

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

dan, ini untuk jsx

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

Semua solusi ini benar-benar mengerikan. Cukup ubah SVG Anda menjadi PNG dan gunakan <Image/>komponen vanilla . Fakta bahwa react-native masih tidak mendukung gambar SVG dalam Imagekomponennya adalah lelucon. Anda tidak boleh menginstal pustaka tambahan untuk tugas sederhana seperti itu. Gunakan https://svgtopng.com/