Comment appliquer dynamiquement des couleurs aux SVG dans 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

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

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>

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>

Utilisation dans React Native :

<ThreeDots height="100%" fill="#707070" />

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;

Utilisation :

<ThreeDots height="100%" fill="#FF0000" />

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!