وارد کردن فایل های SVG در پروژه های React Native: راهنمای جامع

استفاده از فایل های SVG در پروژه های React Native شما می تواند به همان سادگی استفاده از آنها در برنامه های وب باشد. این react-native-svg-transformer کتابخانه این کار را با تبدیل تصاویر SVG وارد شده به اجزای React امکان پذیر می کند. این راهنما شما را از طریق نصب، پیکربندی و استفاده از آن راهنمایی می کند react-native-svg-transformer در پروژه های React Native شما.

فواید

• ثبات: از فایل های SVG یکسان برای پروژه های React Native و وب استفاده کنید.
• انعطاف پذیری: به راحتی فایل های SVG را به عنوان اجزای React وارد کرده و از آنها استفاده کنید.

نصب و پیکربندی گام به گام

مرحله 1: نصب کنید react-native-svg کتابخانه

ابتدا مطمئن شوید که آن را دارید react-native-svg کتابخانه نصب شده است این کتابخانه اجزای لازم را برای رندر تصاویر SVG در React Native فراهم می کند.

برای نصب، اجرا کنید:

npm install react-native-svg

یا

yarn add react-native-svg

برای دستورالعمل‌های نصب دقیق، به صفحه react-native-svg GitHub مراجعه کنید.

مرحله 2: نصب کنید react-native-svg-transformer کتابخانه

بعد، نصب کنید react-native-svg-transformer کتابخانه، که فایل های SVG شما را به اجزای React تبدیل می کند.

برای نصب، اجرا کنید:

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

یا

yarn add --dev react-native-svg-transformer

مرحله 3: React Native Packager را پیکربندی کنید

بسته به تنظیمات شما (Expo یا React Native CLI)، پیکربندی متفاوت خواهد بود. در زیر تنظیمات برای محیط های مختلف آورده شده است:

برای Expo SDK v41.0.0 یا جدیدتر

خود را ایجاد یا به روز کنید metro.config.js فایل با پیکربندی زیر:

const { getDefaultConfig } = require("expo/metro-config");

module.exports = (() => {
  const config = getDefaultConfig(__dirname);

  const { transformer, resolver } = config;

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve("react-native-svg-transformer/expo")
  };
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...resolver.sourceExts, "svg"]
  };

  return config;
})();

برای React Native نسخه 0.72.1 یا جدیدتر

خود را ایجاد یا به روز کنید metro.config.js فایل با پیکربندی زیر:

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  transformer: {
    babelTransformerPath: require.resolve(
      "react-native-svg-transformer/react-native"
    )
  },
  resolver: {
    assetExts: assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...sourceExts, "svg"]
  }
};

module.exports = mergeConfig(defaultConfig, config);

برای React Native نسخه 0.59 یا جدیدتر

خود را ایجاد یا به روز کنید 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/react-native"
      )
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

پروژه های بومی را با استفاده از ماژول های اکسپو واکنش نشان دهید

برای پروژه هایی با استفاده از ماژول های Expo بدون expo-cli، ممکن است لازم باشد مسیر ترانسفورماتور را برای استفاده صحیح از ترانسفورماتور React Native تنظیم کنید:

-require.resolve("react-native-svg-transformer")
+require.resolve("react-native-svg-transformer/react-native")

از طرف دیگر، ترانسفورماتور Expo را مجبور کنید همیشه استفاده شود:

-require.resolve("react-native-svg-transformer")
+require.resolve("react-native-svg-transformer/expo")

با استفاده از TypeScript

اگر پروژه شما از TypeScript استفاده می کند، باید ماژول را برای فایل های SVG اعلام کنید. موارد زیر را به خود اضافه کنید declarations.d.ts فایل (اگر وجود ندارد آن را ایجاد کنید):

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

استفاده

پس از نصب و پیکربندی، می‌توانید فایل‌های SVG را مانند هر کامپوننت دیگری در کامپوننت‌های React خود وارد و استفاده کنید.

مثال:

1. فایل SVG را وارد کنید:

   import Logo from "./logo.svg";
   

2. از SVG به عنوان یک جزء استفاده کنید:

   Logo width={120} height={40} />
   

منابع اضافی

با پیروی از این راهنما، باید بتوانید فایل‌های SVG را به‌طور یکپارچه در پروژه‌های React Native خود ادغام کنید، گردش کار توسعه خود را افزایش دهید و ثبات را در پلتفرم‌های مختلف حفظ کنید.

برای مقالات بیشتر من را دنبال کنید!