如何在 React Native 中動態地將顏色應用於 SVG

SVG 是在 React Native 應用程式中顯示可擴展、基於向量的圖形的強大方法。然而，如果 SVG 程式碼設定不正確，自訂填充等屬性有時會很棘手。當填滿屬性在 SVG 中進行硬編碼時會出現一個常見問題，從而防止動態顏色變化。

本部落格解釋了發生這種情況的原因，並提供了在 React Native 中自訂 SVG 顏色的解決方案。

---

安裝和設定：

a) 安裝：

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

b) 在根目錄中使用以下命令建立/更新 Metro.config.js：

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

現在你可以在 React Native 中使用 svg 檔案了。

---

了解問題

考慮這個 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>

中的 fill="#EFF2F6"元素是硬編碼的。如果將 fill 屬性傳遞給 SVG 元件，它不會覆寫該值。這使得圖形靜態並且對動態樣式沒有響應。

---

解決方案 1：使用 currentColor

將填滿屬性動態化最簡單的方法是用 currentColor 取代硬編碼的填滿值。 currentColor 值繼承傳遞給元件的顏色或填滿屬性。

更新的 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>

React Native 中的用法：

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

現在，fill 屬性可以動態控制 SVG 的顏色。

---

解決方案2：使用React Native的react-native-svg

如果您使用react-native-svg來處理SVG，您可以為SVG建立一個React元件並將填充作為道具傳遞。

這是一個例子：

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;

用法：

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

fill 屬性現在動態傳遞到 元素。

---

結論

透過使用 currentColor、react-native-svg 或自訂 SVG 元件，您可以動態控制 React Native 應用程式中的填滿屬性。這可以提供更大的靈活性，並確保您的設計是動態的並且能夠響應用戶互動或主題更改。

以上是如何在 React Native 中動態地將顏色應用於 SVG的詳細內容。更多資訊請關注PHP中文網其他相關文章！