Cara Menggunakan Warna Secara Dinamik pada SVG dalam React Native

SVG ialah cara yang berkesan untuk memaparkan grafik berasaskan vektor boleh skala dalam aplikasi React Native. Walau bagaimanapun, menyesuaikan atribut seperti isian kadangkala boleh menjadi rumit jika kod SVG tidak disediakan dengan betul. Isu biasa timbul apabila sifat isian dikodkan keras dalam SVG, menghalang perubahan warna dinamik.

Blog ini menerangkan sebab ini berlaku dan menyediakan penyelesaian untuk menjadikan warna SVG boleh disesuaikan dalam React Native.

---

Pemasangan dan persediaan:

a) Pasang:

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

b) Dalam direktori akar buat/kemas kini metro.config.js dengan:

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

Kini anda boleh menggunakan fail svg dalam react native.

---

Memahami Masalah

Pertimbangkan contoh fail SVG ini:

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

Isi="#EFF2F6" dalam elemen dikodkan keras. Jika anda menghantar prop isian kepada komponen SVG, ia tidak akan mengatasi nilai ini. Ini menjadikan grafik statik dan tidak bertindak balas terhadap gaya dinamik.

---

Penyelesaian 1: Gunakan currentColor

Cara paling mudah untuk menjadikan sifat isian dinamik ialah menggantikan nilai isian berkod keras dengan CurrentColor. Nilai currentColor mewarisi sifat warna atau isian yang dihantar kepada komponen.

SVG yang dikemas kini:

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

Penggunaan dalam React Native:

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

Kini, sifat isian mengawal warna SVG secara dinamik.

---

Penyelesaian 2: Gunakan React Native's react-native-svg

Jika anda menggunakan react-native-svg untuk mengendalikan SVG, anda boleh mencipta komponen React untuk SVG dan lulus isian sebagai prop.

Ini contohnya:

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;

Penggunaan:

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

Prop isi kini dihantar secara dinamik ke elemen.

---

Kesimpulan

Dengan menggunakan currentColor, react-native-svg atau menyesuaikan komponen SVG, anda boleh mengawal sifat isian secara dinamik dalam apl React Native anda. Ini membolehkan lebih fleksibiliti dan memastikan reka bentuk anda dinamik dan responsif kepada interaksi pengguna atau perubahan tema.

Atas ialah kandungan terperinci Cara Menggunakan Warna Secara Dinamik pada SVG dalam React Native. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!