在 React Native 專案中匯入 SVG 檔案：綜合指南

在 React Native 專案中使用 SVG 檔案就像在 Web 應用程式中使用它們一樣簡單。 React-native-svg-transformer 函式庫透過將匯入的 SVG 影像轉換為 React 元件來實現這一點。本指南將引導您完成在 React Native 專案中安裝、設定和使用react-native-svg-transformer。

好處

• 一致性： 對 React Native 和 Web 專案使用相同的 SVG 檔案。
• 靈活性：輕鬆導入 SVG 檔案並將其用作 React 元件。

逐步安裝和配置

第1步：安裝react-native-svg函式庫

首先，請確保您安裝了react-native-svg函式庫。該程式庫提供了在 React Native 中渲染 SVG 圖像所需的元件。

要安裝，請執行：

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 打包器

根據您的設定（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 v0.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 v0.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模組而不使用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.FC<SvgProps>;
  export default content;
}

用法

安裝和設定後，您可以像任何其他元件一樣在 React 元件中匯入和使用 SVG 檔案。

範例：

1. 匯入 SVG 檔案：
   

   import Logo from "./logo.svg";
   

2. 使用 SVG 作為組件：
   

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

其他資源

• 示範項目：
  • react-native-svg-範例
  • react-native-svg-expo-example

---

透過遵循本指南，您應該能夠將 SVG 檔案無縫整合到您的 React Native 專案中，從而增強您的開發工作流程並保持不同平台之間的一致性。

追蹤我看更多文章！

以上是在 React Native 專案中匯入 SVG 檔案：綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！