如何在 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中文网其他相关文章！