Importation de fichiers SVG dans des projets React Native : un guide complet

Utiliser des fichiers SVG dans vos projets React Native peut être aussi simple que de les utiliser dans des applications Web. La bibliothèque React-native-svg-transformer rend cela possible en transformant vos images SVG importées en composants React. Ce guide vous guidera à travers l'installation, la configuration et l'utilisation de React-native-svg-transformer dans vos projets React Native.

Avantages

• Cohérence : Utilisez les mêmes fichiers SVG pour les projets React Native et Web.
• Flexibilité : Importez et utilisez facilement des fichiers SVG en tant que composants React.

Installation et configuration étape par étape

Étape 1 : Installer la bibliothèque React-Native-svg

Tout d’abord, assurez-vous que la bibliothèque React-Native-svg est installée. Cette bibliothèque fournit les composants nécessaires pour restituer les images SVG dans React Native.

Pour installer, exécutez :

npm install react-native-svg

ou

yarn add react-native-svg

Pour des instructions d'installation détaillées, reportez-vous à la page GitHub de React-native-svg.

Étape 2 : Installer la bibliothèque React-Native-svg-transformer

Ensuite, installez la bibliothèque React-native-svg-transformer, qui transformera vos fichiers SVG en composants React.

Pour installer, exécutez :

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

ou

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

Étape 3 : configurer le packager natif React

En fonction de votre configuration (Expo ou React Native CLI), la configuration sera différente. Vous trouverez ci-dessous les configurations pour différents environnements :

Pour Expo SDK v41.0.0 ou version ultérieure

Créez ou mettez à jour votre fichier metro.config.js avec la configuration suivante :

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

Pour React Native v0.72.1 ou version ultérieure

Créez ou mettez à jour votre fichier metro.config.js avec la configuration suivante :

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

Pour React Native v0.59 ou version ultérieure

Créez ou mettez à jour votre fichier metro.config.js avec la configuration suivante :

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

Projets React Native à l'aide de modules Expo

Pour les projets utilisant des modules Expo sans expo-cli, vous devrez peut-être ajuster le chemin du transformateur pour utiliser correctement le transformateur de React Native :

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

Vous pouvez également forcer le transformateur d'Expo à toujours être utilisé :

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

Utiliser TypeScript

Si votre projet utilise TypeScript, vous devez déclarer le module pour les fichiers SVG. Ajoutez ce qui suit à votre fichier déclarations.d.ts (créez-le s'il n'existe pas) :

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

Usage

Après l'installation et la configuration, vous pouvez importer et utiliser des fichiers SVG dans vos composants React comme n'importe quel autre composant.

Exemple :

1. Importez le fichier SVG :
   

   import Logo from "./logo.svg";
   

2. Utilisez le SVG comme composant :
   

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

Ressources supplémentaires

• Projets de démonstration :
  • exemple-react-native-svg
  • react-native-svg-expo-exemple

---

En suivant ce guide, vous devriez être en mesure d'intégrer de manière transparente des fichiers SVG dans vos projets React Native, améliorant ainsi votre flux de travail de développement et maintenant la cohérence sur les différentes plates-formes.

Suivez-moi pour plus d'articles !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!