كيفية إستخدام صور SVG في React Native؟

مرحبا عماد، لم اقم بتجربة هذا الحل ولكنه حصل على 127 صوت على stackoverflow.

يتضمن الحل:
1. تحويل الملف من svg إلى JSX من خلال الأداة التالية:
https://svg2jsx.herokuapp.com/
2. تحويل الملف JSX الناتج من العملية السابقة إلى مكون react-native-svg من خلال الأداة التالية: (مع الإنتباه إلى تأشير React Native من القائمة على اليسار)
https://react-svgr.com/playground/?native=true

أرجو ان ينفعك هذا الحل

المصدر:
https://stackoverflow.com/questions/38830568/how-to-show-svg-file-on-react-native

يمكنك إستخدام الحزمة react-native-svg لإضافة دعم صور SVG إلى React Native، في البداية عليك تثبيت الحزمة من خلال الأمر التالي:

npm i react-native-svg

// using yarn 
yarn add react-native-svg

ثم قم بربط الحزمة من خلال الأمر التالي:

react-native link react-native-svg

أو إذا كنت تستعمل expo فيمكنك تثبيت الحزمة من خلال الأمر التالي فقط:
 

expo install react-native-svg

وتستطيع إستخدام الحزمة بالشكل التالي:

import * as React from 'react';
import { SvgXml } from 'react-native-svg';
import testSvg from './test.svg';
export default () => <SvgXml width="200" height="200" xml={testSvg} />;

أو من خلال عوان URL:

import * as React from 'react';
import { SvgUri } from 'react-native-svg';

export default () => (
  <SvgUri
    width="100%"
    height="100%"
    uri="http://example.com/images/svg-image.svg"
  />
);