কীভাবে প্রতিক্রিয়া নেটিভ এ এসভিজি ফাইল প্রদর্শন করবেন?

Question 1

আমি এসভিজি ফাইলগুলি দেখতে চাই (আমার কাছে এসভিজি চিত্রের গুচ্ছ রয়েছে) তবে জিনিসটি আমি দেখানোর উপায় খুঁজে পাইনি। আমি প্রতিক্রিয়া-স্থানীয়-এসভিজি এর চিত্র এবং ব্যবহারের উপাদানগুলি ব্যবহার করার চেষ্টা করেছি কিন্তু তারা সেগুলি নিয়ে কাজ করে না। এবং আমি দেশীয় উপায়ে এটি করার চেষ্টা করেছি তবে কেবল এসভিজি চিত্র দেখাতে এটি কঠোর পরিশ্রম।

উদাহরণ কোড:

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

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

এছাড়াও আমি জানি যে রিএ্যাক্ট নেটিভ মূলত এসভিজি সমর্থন করে না তবে আমি মনে করি যে কেউ এই সমস্যাটি জটিল পদ্ধতিতে সমাধান করেছেন (সাথে / প্রতিক্রিয়া-নেটিভ-এসভিজি ছাড়াই)

Question 2

আমি নিম্নলিখিত সমাধানটি ব্যবহার করেছি:

রূপান্তর .svgসঙ্গে JSX ছবিতে https://svg2jsx.herokuapp.com/
জেএসএক্সকে https://svgr.now.sh/react-native-svg দিয়ে উপাদানগুলিতে রূপান্তর করুন ("দেশীয় প্রতিক্রিয়া দেখান চেকবক্সটি দেখুন)

Question 3

আমি এখানে আরেকটি সমাধান পোস্ট করেছি যা কোন ভেক্টর (এসভিজি) গ্রাফকে একটি বিক্রিয়া নেটিভ অ্যাপ্লিকেশনটিতে সন্নিবেশ করানোর জন্য সেরা পন্থা , এই পদ্ধতির পরিবর্তে একটি এসভিজি ফাইল ব্যবহার করে একটি ভেক্টর ফন্ট (এসভিজি থেকে) ব্যবহার করা হয়। পিএস: এটি আইওএস এবং অ্যান্ড্রয়েডে দুর্দান্ত কাজ করে এবং আপনি আপনার ভেক্টর আইকনের রঙ এবং আকারও পরিবর্তন করতে পারেন।

আপনি যদি সরাসরি আপনার অ্যাপ্লিকেশনে কোনও এসভিজি toোকাতে চান তবে আপনি একটি তৃতীয় পক্ষের লাইব্রেরিটি চেষ্টা করতে পারেন: রিট্যাক্ট-নেটিভ-এসভিজি। গিথুবে 3k এরও বেশি তারকা সহ এটি সেরা পদ্ধতির একটি।

ইনস্টল করুন:
- এনপিএম আমি-নেটিভ-এসভিজি প্রতিক্রিয়া জানাই
- এনপিএম আমি স্থানীয়-এসভিজি-ইউরি প্রতিক্রিয়া জানায়
স্থানীয় লিঙ্ক:
- নেটিভ লিঙ্কটি প্রতিক্রিয়া করুন-নেটিভ-এসভিজি

এবং এখানে একটি নমুনা:

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

রিএ্যাক্ট-নেটিভ-এসভিজি-ট্রান্সফর্মার ইনস্টল করুন

এনপিএম আমি প্রতিক্রিয়া করি-নেটিভ-এসভিজি-ট্রান্সফর্মার - সেভ-দেব

আমি নিম্নলিখিত হিসাবে এসভিজি ব্যবহার করছি এবং এটি দুর্দান্ত কাজ করে

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 এ সমর্থন করে না এবং তাই নিম্নতর এসভিজি .svgxফাইলগুলির জন্য এক্সটেনশন ব্যবহার করে।

ওয়েব বা প্রতিক্রিয়া স্থানীয়-ওয়েব ব্যবহারের জন্য https://www.npmjs.com/package/@svgr/webpack

রিট্যাক্ট react-native-svg-uri-নেটিভ সংস্করণ 0.57 এবং নিম্নের সাহায্যে এসজিজি ফাইলগুলি রেন্ডার করতে আপনাকে আপনার রুট প্রকল্পে নিম্নলিখিত ফাইলগুলি যুক্ত করতে হবে

দ্রষ্টব্য: এতে এক্সটেনশন পরিবর্তন 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"];
    }
  };

উল্লিখিত সমাধানগুলি প্রডাকশন অ্যাপগুলিতেও কাজ করবে ✅

Question 8

আমি উপরের সমস্ত সমাধান এবং স্ট্যাকের বাইরে অন্যান্য সমাধানগুলি চেষ্টা করেছি এবং আমার পক্ষে কাজ করে না। অবশেষে, দীর্ঘ গবেষণার পরে, আমি আমার এক্সपो প্রকল্পের জন্য একটি সমাধান খুঁজে পেয়েছি।

আপনার যদি এক্সপোতে এটির কাজ করার প্রয়োজন হয় তবে একটি কাজ হতে পারে https://react-svgr.com/playground/ ব্যবহার করুন এবং প্রপসগুলির প্রসারণটি এসভিজি রুটের পরিবর্তে একটি জি উপাদানগুলিতে স্থানান্তরিত করুন:

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

দ্রষ্টব্য: এসভিজি অ্যান্ড্রয়েড রিলিজ সংস্করণগুলির জন্য কাজ করে না তাই অ্যান্ড্রয়েডের জন্য বিবেচনা করবেন না। এটি কেবল ডিবাগ মোডে অ্যান্ড্রয়েডের জন্য কাজ করবে। তবে এটি আইওএসের জন্য কাজ করে।

Https://github.com/vault-de વિકાસ ment/ 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

আমি এই দুটি প্লাগইন ব্যবহার করি,

[প্রতিক্রিয়া নেটিভ-এসভিজি] https://github.com/react-native-commune/react-native-svg )
[দেশীয়-এসভিজি-ট্রান্সফরমার প্রতিক্রিয়া] https://github.com/kristerkari/react-native-svg-transformer )

প্রথমে আপনাকে এই প্লাগইনটি ইনস্টল করতে হবে। এর পরে আপনাকে এই কোড সহ আপনার metro.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/ ব্যবহার করুন

কীভাবে প্রতিক্রিয়া নেটিভ এ এসভিজি ফাইল প্রদর্শন করবেন?

পদক্ষেপ 1: transformer.jsপ্রকল্পের মূলটিতে ফাইল যুক্ত করুন

পদক্ষেপ 2: rn-cli.config.jsপ্রকল্পের মূলটিতে যুক্ত করুন

পদক্ষেপ 1: `transformer.js`প্রকল্পের মূলটিতে ফাইল যুক্ত করুন

পদক্ষেপ 2: `rn-cli.config.js`প্রকল্পের মূলটিতে যুক্ত করুন