دليل استيراد SVG في React Native: react-native-svg + SvgXml

أصبح SVG (الرسومات المتجهة القابلة للتوسع) من أهم تنسيقات الأصول الرسومية في مشاريع React Native. وبالمقارنة مع تنسيقات الصور النقطية التقليدية مثل PNG وJPG، يمنحك SVG دقة ثابتة عند التكبير، وأحجام ملفات أصغر، وتحكمًا أكبر في الألوان والأنماط. يشرح هذا الدليل طريقتين عمليتين لاستيراد ملفات SVG واستخدامها في مشاريع React Native مع أمثلة واضحة وملاحظات مفيدة للأداء.

لماذا تستخدم SVG في React Native

يوفّر SVG مزايا مهمة عند تطوير تطبيقات الجوال:

تحجيم مثالي: تبقى الرسومات حادة مهما اختلف حجم الشاشة أو كثافة العرض.
حجم ملف أصغر: ملفات SVG أخف عادة من مجموعات أصول PNG المتعددة
التصميم الديناميكي: يمكن تعديل الألوان والأحجام والسمات الأخرى ديناميكياً عبر الخصائص
الاتساق: يتم عرضها بشكل متطابق على منصتي iOS و Android

التبعية الأساسية: react-native-svg

الخطوة الأولى لاستخدام صور SVG في React Native هي تثبيت مكتبة react-native-svg، التي تسمح لنا بعرض ملفات SVG أصلياً في تطبيقات React Native.

npm install react-native-svg
# أو
yarn add react-native-svg

ملاحظة: لـ React Native 0.60 وما فوق، الربط عادة تلقائي. للإصدارات السابقة، قد تحتاج إلى ربط الوحدات الأصلية يدوياً.

الطريقة الأولى: استخدام react-native-svg-transformer

هذا هو النهج الأكثر شيوعًا، لأنه يتيح لك استيراد ملفات SVG مباشرة كمكونات، تمامًا كما تفعل في مشاريع React على الويب.

التهيئة

ثبت المحول:

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

في metro.config.js:

const { getDefaultConfig } = require('expo/metro-config');
const transformer = require('react-native-svg-transformer');

module.exports = (async () => {
  const defaultConfig = await getDefaultConfig(__dirname);
  return {
    ...defaultConfig,
    transformer: {
      ...defaultConfig.transformer,
      babelPlugins: ['react-native-svg-transformer'],
    },
  };
})();

الاستخدام

import MyIcon from './my-icon.svg';

function App() {
  return (
    <View>
      <MyIcon width={24} height={24} fill="red" />
    </View>
  );
}

الطريقة الثانية: استخدام SvgXml

للحصول على SVG من سلسلة أو تحميله ديناميكياً:

import { SvgXml } from 'react-native-svg';

const svgString = `<svg width="24" height="24" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" fill="red" />
</svg>`;

function App() {
  return <SvgXml xml={svgString} width={24} height={24} />;
}

اختيار الطريقة

استيراد ثابت: استخدم react-native-svg-transformer للملفات التي تشكّل جزءًا من المشروع.
عرض ديناميكي: استخدم SvgXml للملفات المحمّلة من الشبكة أو من التخزين المحلي.

الملخص

كلتا الطريقتين فعالتان. اختر الأسلوب الذي يناسب طريقة إدارة الأصول في مشروعك، ثم ثبّته كسير عمل واضح داخل الفريق.

دليل استيراد SVG في React Native: react-native-svg + SvgXml