Mengimport Fail SVG dalam Projek Asli React: Panduan Komprehensif

Menggunakan fail SVG dalam projek React Native anda boleh menjadi semudah menggunakannya dalam aplikasi web. Pustaka react-native-svg-transformer menjadikannya mungkin dengan menukar imej SVG yang diimport anda kepada komponen React. Panduan ini akan membimbing anda melalui pemasangan, konfigurasi dan penggunaan react-native-svg-transformer dalam projek React Native anda.

Faedah

• Ketekalan: Gunakan fail SVG yang sama untuk kedua-dua projek React Native dan web.
• Fleksibiliti: Import dan gunakan fail SVG dengan mudah sebagai komponen React.

Pemasangan dan Konfigurasi Langkah demi Langkah

Langkah 1: Pasang Pustaka react-native-svg

Pertama, pastikan anda memasang pustaka react-native-svg. Pustaka ini menyediakan komponen yang diperlukan untuk memaparkan imej SVG dalam React Native.

Untuk memasang, jalankan:

npm install react-native-svg

atau

yarn add react-native-svg

Untuk arahan pemasangan terperinci, rujuk halaman GitHub react-native-svg.

Langkah 2: Pasang Pustaka react-native-svg-transformer

Seterusnya, pasang pustaka react-native-svg-transformer, yang akan mengubah fail SVG anda kepada komponen React.

Untuk memasang, jalankan:

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

atau

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

Langkah 3: Konfigurasikan React Native Packager

Bergantung pada persediaan anda (Ekspo atau React Native CLI), konfigurasi akan berbeza. Berikut ialah konfigurasi untuk persekitaran yang berbeza:

Untuk Ekspo SDK v41.0.0 atau Lebih Baru

Buat atau kemas kini fail metro.config.js anda dengan konfigurasi berikut:

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

Untuk React Native v0.72.1 atau Lebih Baru

Buat atau kemas kini fail metro.config.js anda dengan konfigurasi berikut:

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

Untuk React Native v0.59 atau Lebih Baru

Buat atau kemas kini fail metro.config.js anda dengan konfigurasi berikut:

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"]
    }
  };
})();

React Projek Asli Menggunakan Modul Ekspo

Untuk projek yang menggunakan modul Ekspo tanpa ekspo-kli, anda mungkin perlu melaraskan laluan pengubah untuk menggunakan pengubah React Native dengan betul:

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

Sebagai alternatif, paksa pengubah Expo untuk sentiasa digunakan:

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

Menggunakan TypeScript

Jika projek anda menggunakan TypeScript, anda perlu mengisytiharkan modul untuk fail SVG. Tambahkan yang berikut pada fail declarations.d.ts anda (buat jika ia tidak wujud):

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

Penggunaan

Selepas pemasangan dan konfigurasi, anda boleh mengimport dan menggunakan fail SVG dalam komponen React anda sama seperti komponen lain.

Contoh:

1. Import fail SVG:
   

   import Logo from "./logo.svg";
   

2. Gunakan SVG sebagai komponen:
   

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

Sumber Tambahan

• Projek Demo:
  • contoh-react-native-svg-example
  • contoh-ekspo-react-native-svg-expo

---

Dengan mengikuti panduan ini, anda seharusnya dapat menyepadukan fail SVG dengan lancar ke dalam projek React Native anda, meningkatkan aliran kerja pembangunan anda dan mengekalkan konsistensi merentas platform yang berbeza.

Ikuti saya untuk lebih banyak artikel!

Atas ialah kandungan terperinci Mengimport Fail SVG dalam Projek Asli React: Panduan Komprehensif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!