So wenden Sie Farben dynamisch auf SVGs in React Native an

SVGs sind eine leistungsstarke Möglichkeit, skalierbare, vektorbasierte Grafiken in React Native-Anwendungen anzuzeigen. Allerdings kann das Anpassen von Attributen wie Füllung manchmal schwierig sein, wenn der SVG-Code nicht richtig eingerichtet ist. Ein häufiges Problem tritt auf, wenn die Füllungseigenschaft im SVG fest codiert ist, wodurch dynamische Farbänderungen verhindert werden.

Dieser Blog erklärt, warum dies passiert, und bietet Lösungen, um SVG-Farben in React Native anpassbar zu machen.

---

Installation und Einrichtung:

a) Installieren:

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

b) Erstellen/aktualisieren Sie im Stammverzeichnis metro.config.js mit:

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

Jetzt können Sie SVG-Dateien in React Native verwenden.

---

Das Problem verstehen

Betrachten Sie dieses Beispiel einer SVG-Datei:

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

Das fill="#EFF2F6" im Element ist fest codiert. Wenn Sie eine Fill-Requisite an die SVG-Komponente übergeben, wird dieser Wert nicht überschrieben. Dadurch wird die Grafik statisch und reagiert nicht mehr auf dynamische Stile.

---

Lösung 1: Verwenden Sie currentColor

Der einfachste Weg, die Füllungseigenschaft dynamisch zu gestalten, besteht darin, den fest codierten Füllungswert durch currentColor zu ersetzen. Der currentColor-Wert erbt die an die Komponente übergebene Farb- oder Fülleigenschaft.

Aktualisiertes 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="currentColor"
  />
</svg>

Verwendung in React Native:

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

Jetzt steuert die Fülleigenschaft dynamisch die Farbe des SVG.

---

Lösung 2: Verwenden Sie „react-native-svg“ von React Native

Wenn Sie „react-native-svg“ verwenden, um SVGs zu verarbeiten, können Sie eine React-Komponente für das SVG erstellen und die Füllung als Requisite übergeben.

Hier ist ein Beispiel:

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;

Verwendung:

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

Die Füllstütze wird jetzt dynamisch an den übergeben. Element.

---

Abschluss

Durch die Verwendung von currentColor, React-Native-Svg oder das Anpassen von SVG-Komponenten können Sie die Fülleigenschaft in Ihrer React Native-App dynamisch steuern. Dies ermöglicht eine größere Flexibilität und stellt sicher, dass Ihre Designs dynamisch sind und auf Benutzerinteraktionen oder Themenänderungen reagieren.

Das obige ist der detaillierte Inhalt vonSo wenden Sie Farben dynamisch auf SVGs in React Native an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!