React Native で SVG に動的に色を適用する方法

SVG は、React Native アプリケーションでスケーラブルなベクターベースのグラフィックスを表示する強力な方法です。ただし、SVG コードが適切に設定されていない場合、fill などの属性のカスタマイズが困難になる場合があります。一般的な問題は、塗りつぶしプロパティが 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 prop を SVG コンポーネントに渡す場合、この値はオーバーライドされません。これにより、グラフィックが静的になり、動的スタイルに応答しなくなります。

---

解決策 1: currentColor を使用する

fill プロパティを動的にする最も簡単な方法は、ハードコードされた fill 値を currentColor に置き換えることです。 currentColor 値は、コンポーネントに渡される color または fill プロパティを継承します。

更新された 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 コンポーネントを作成し、塗りつぶしを prop として渡すことができます。

これが例です:

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 prop が動的に に渡されるようになりました。要素。

---

結論

currentColor、react-native-svg を使用するか、SVG コンポーネントをカスタマイズすることにより、React Native アプリの fill プロパティを動的に制御できます。これにより、柔軟性が向上し、デザインが動的で、ユーザーの操作やテーマの変更に応答できるようになります。

以上がReact Native で SVG に動的に色を適用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。