रिएक्टिव नेटिव पर SVG फ़ाइल कैसे दिखाएँ?

Question 1

मैं svg फाइलें दिखाना चाहता हूं (मेरे पास svg images का गुच्छा है) लेकिन वह चीज जो मुझे दिखाने का तरीका नहीं मिला। मैंने प्रतिक्रिया-देशी-एसवीजी के छवि और उपयोग घटकों का उपयोग करने की कोशिश की, लेकिन वे इसके साथ काम नहीं करते हैं। और मैंने इसे देशी तरीके से करने की कोशिश की, लेकिन यह सिर्फ svg छवि दिखाने के लिए वास्तव में कड़ी मेहनत है।

उदाहरण कोड:

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

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

मुझे यह भी पता है कि प्रतिक्रिया मूल रूप से svg का समर्थन नहीं करती है, लेकिन मुझे लगता है कि किसी ने इस समस्या को पेचीदा तरीके से तय किया है (प्रतिक्रिया के बिना / svj)

Question 2

मैंने निम्नलिखित समाधान का उपयोग किया:

.svgछवि को JSX में https://svg2jsx.herokuapp.com/ से कनवर्ट करें
JSX को react-native-svgघटक के साथ https://svgr.now.sh/ में कनवर्ट करें ("रिएक्टिव नेटिव चेकबॉक्स देखें)"

Question 3

मैंने एक और समाधान यहां पोस्ट किया है जो एक वेक्टर (svg) ग्राफ को एक प्रतिक्रिया देशी अनुप्रयोग में डालने के लिए सबसे अच्छा तरीका है । यह दृष्टिकोण एक svg फ़ाइल के बजाय एक वेक्टर फ़ॉन्ट (svg से) का उपयोग करता है। PS: इसका आईओएस और एंड्रॉइड में बहुत अच्छा काम करता है, और आप अपने वेक्टर आइकन का रंग और आकार भी बदल सकते हैं।

अगर आप सीधे अपने ऐप में svg डालना चाहते हैं, तो आप 3rd पार्टी लाइब्रेरी आज़मा सकते हैं: react-native-svg। जीथब में 3k से अधिक सितारों के साथ यह सबसे अच्छा दृष्टिकोण में से एक है।

इंस्टॉल:
- npm i प्रतिक्रिया-मूल-svg
- npm i प्रतिक्रिया-मूल-svg-uri
मूल निवासी से लिंक करें:
- प्रतिक्रिया-मूल लिंक प्रतिक्रिया-मूल-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}
  />
);

Question 4

कई तरीकों और पुस्तकालयों की कोशिश करने के बाद मैंने एक नया फ़ॉन्ट बनाने का फैसला किया ( ग्लिफ़ या इस ट्यूटोरियल के साथ ) और इसमें अपनी एसवीजी फाइलें जोड़ें, फिर अपने कस्टम फ़ॉन्ट के साथ "टेक्स्ट" घटक का उपयोग करें।

आशा है कि यह किसी को भी प्रतिक्रिया-मूल में एसवीजी के साथ समान समस्या रखने में मदद करता है।

Question 5

प्रतिक्रिया-मूल-svg- ट्रांसफार्मर स्थापित करें

npm i रिएक्ट-देशी-एसवीजी-ट्रांसफॉर्मर -सेवे-देव

मैं निम्नलिखित के रूप में एसवीजी का उपयोग कर रहा हूं और यह ठीक काम करता है

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

रेंडर में

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

Question 6

मुझे भी यही समस्या थी। मैं इस समाधान का उपयोग कर रहा हूं जो मुझे मिला: एक फाइल से रिएक्टिव नेटिव डिस्प्ले एसवीजी

यह सही नहीं है, और मैं आज फिर से सोच रहा हूं, क्योंकि यह एंड्रॉइड पर बहुत बुरा प्रदर्शन करता है।

Question 7

Https://github.com/kristerkari/react-native-svg-transformer का उपयोग करें

इस पैकेज में यह उल्लेख किया गया है कि .svgफाइलें रिएक्ट नेटिव v0.57 में समर्थित नहीं हैं और यह .svgxsvg फाइलों के लिए कम विस्तार का उपयोग करता है।

वेब या प्रतिक्रिया-मूल-वेब के लिए https://www.npmjs.com/package/@svgr/webpack का उपयोग करें

react-native-svg-uriप्रतिक्रिया-मूल संस्करण 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"];
    }
  };

उपर्युक्त समाधान उत्पादन ऐप में भी काम करेंगे work

Question 8

मैंने उपरोक्त सभी समाधानों और स्टैक के बाहर अन्य समाधानों की कोशिश की है और मेरे लिए कोई भी काम नहीं कर रहा है। आखिरकार, लंबे शोध के बाद, मैंने अपने एक्सपो प्रोजेक्ट के लिए एक समाधान ढूंढ लिया है।

यदि आपको एक्सपो में काम करने की आवश्यकता है, तो एक वर्कअराउंड 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" />
  );
}

Question 9

नोट: Svg एंड्रॉइड रिलीज़ संस्करणों के लिए काम नहीं करता है इसलिए एंड्रॉइड के लिए विचार न करें। यह केवल डिबग मोड में 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')} />

Question 10

मैं इन दो प्लगइन्स का उपयोग करता हूं,

[प्रतिक्रिया-मूल-svg] https://github.com/react-native-community/react-native-svv )
[प्रतिक्रिया-मूल-svg- ट्रांसफार्मर] https://github.com/kristerkari/react-native-svg-transformer )

सबसे पहले, आपको उस प्लगइन को स्थापित करना होगा। उसके बाद आपको इस कोड के साथ अपनी मेट्रो.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"]
    }
  };
})();

अधिक जानकारी के लिए, आप इस लिंक पर जा सकते हैं

Question 11

आप किसी भी एसवीजी को एक घटक में बदल सकते हैं और इसे पुन: प्रयोज्य बना सकते हैं।

यहाँ आप कर सकते हैं सबसे आसान तरीका के लिए मेरा जवाब है

घटक को एसवीजी

Question 12

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

Question 13

ये सभी उपाय बिल्कुल भयावह हैं। बस अपने एसवीजी को एक पीएनजी में परिवर्तित करें और वेनिला <Image/>घटक का उपयोग करें । तथ्य यह है कि प्रतिक्रिया-मूल अभी भी Imageघटक में एसवीजी छवियों का समर्थन नहीं करता है एक मजाक है। आपको इस तरह के एक सरल कार्य के लिए अतिरिक्त पुस्तकालय स्थापित नहीं करना चाहिए। Https://svgtopng.com/ का उपयोग करें

रिएक्टिव नेटिव पर SVG फ़ाइल कैसे दिखाएँ?

चरण 1: transformer.jsपरियोजना की जड़ में फ़ाइल जोड़ें

चरण 2: rn-cli.config.jsपरियोजना की जड़ में जोड़ें

चरण 1: `transformer.js`परियोजना की जड़ में फ़ाइल जोड़ें

चरण 2: `rn-cli.config.js`परियोजना की जड़ में जोड़ें