React Native プロジェクトでの SVG ファイルのインポート: 包括的なガイド-jsチュートリアル-php.cn

React Native プロジェクトでの SVG ファイルのインポート: 包括的なガイド

王林

リリース： 2024-07-24 14:12:53

オリジナル

782 人が閲覧しました

Importing SVG Files in React Native Projects: A Comprehensive Guide

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 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 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 モジュールを使用した React Native プロジェクト

expo-cli を使用せずに Expo モジュールを使用するプロジェクトの場合、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;
}

ログイン後にコピー