Maison > interface Web > js tutoriel > Comment appliquer dynamiquement des couleurs aux SVG dans React Native

Comment appliquer dynamiquement des couleurs aux SVG dans React Native

Linda Hamilton
Libérer: 2025-01-09 14:28:41
original
1015 Les gens l'ont consulté

How to Dynamically Apply Colors to SVGs in React Native

Les SVG sont un moyen puissant d'afficher des graphiques vectoriels évolutifs dans les applications React Native. Cependant, personnaliser des attributs comme fill peut parfois s'avérer délicat si le code SVG n'est pas correctement configuré. Un problème courant survient lorsque la propriété fill est codée en dur dans le SVG, empêchant les changements de couleur dynamiques.

Ce blog explique pourquoi cela se produit et propose des solutions pour rendre les couleurs SVG personnalisables dans React Native.


Installation et configuration :

a) Installer :

yarn add react-native-svg && yarn add react-native-svg-transformer --dev
Copier après la connexion

b) Dans le répertoire racine, créez/mettez à jour metro.config.js avec :

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

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

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

module.exports = mergeConfig(defaultConfig, config);
Copier après la connexion

Vous pouvez désormais utiliser des fichiers SVG dans React Native.


Comprendre le problème

Considérez cet exemple de fichier SVG :

<svg
  width="4"
  height="18"
  viewBox="0 0 4 18"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M1.9987 4.41667C0.986176 4.41667 0.165365 3.59586 0.165365 2.58333C0.165365 1.57081 0.986176 0.75 1.9987 0.75C3.01122 0.75 3.83203 1.57081 3.83203 2.58333C3.83203 3.59586 3.01122 4.41667 1.9987 4.41667Z"
    fill="#EFF2F6"
  />
</svg>
Copier après la connexion

Le fill="#EFF2F6" dans le l’élément est codé en dur. Si vous transmettez un accessoire de remplissage au composant SVG, il ne remplacera pas cette valeur. Cela rend le graphique statique et insensible aux styles dynamiques.


Solution 1 : utiliser la couleur actuelle

Le moyen le plus simple de rendre la propriété fill dynamique est de remplacer la valeur de remplissage codée en dur par currentColor. La valeur currentColor hérite de la propriété color ou fill transmise au composant.

SVG mis à jour :

<svg
  width="4"
  height="18"
  viewBox="0 0 4 18"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M1.9987 4.41667C0.986176 4.41667 0.165365 3.59586 0.165365 2.58333C0.165365 1.57081 0.986176 0.75 1.9987 0.75C3.01122 0.75 3.83203 1.57081 3.83203 2.58333C3.83203 3.59586 3.01122 4.41667 1.9987 4.41667Z"
    fill="currentColor"
  />
</svg>
Copier après la connexion

Utilisation dans React Native :

<ThreeDots height="100%" fill="#707070" />
Copier après la connexion

Maintenant, la propriété fill contrôle dynamiquement la couleur du SVG.


Solution 2 : utilisez le React-native-svg de React Native

Si vous utilisez React-native-svg pour gérer les SVG, vous pouvez créer un composant React pour le SVG et transmettre le remplissage comme accessoire.

Voici un exemple :

import Svg, { Path } from 'react-native-svg';

const ThreeDots = ({ height = "100%", fill = "#707070" }) => (
  <Svg width="4" height="18" viewBox="0 0 4 18" fill="none" xmlns="http://www.w3.org/2000/svg">
    <Path
      d="M1.9987 4.41667C0.986176 4.41667 0.165365 3.59586 0.165365 2.58333C0.165365 1.57081 0.986176 0.75 1.9987 0.75C3.01122 0.75 3.83203 1.57081 3.83203 2.58333C3.83203 3.59586 3.01122 4.41667 1.9987 4.41667Z"
      fill={fill}
    />
  </Svg>
);

export default ThreeDots;
Copier après la connexion

Utilisation :

<ThreeDots height="100%" fill="#FF0000" />
Copier après la connexion

Le prop fill est désormais transmis dynamiquement au élément.


Conclusion

En utilisant currentColor, React-native-svg ou en personnalisant les composants SVG, vous pouvez contrôler dynamiquement la propriété fill dans votre application React Native. Cela permet une plus grande flexibilité et garantit que vos conceptions sont dynamiques et réactives aux interactions des utilisateurs ou aux changements de thème.

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal