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" 요소가 하드코딩되어 있습니다. 채우기 속성을 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" />

이제 채우기 속성이 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 소품이 요소.

---

결론

currentColor, React-native-svg를 사용하거나 SVG 구성 요소를 사용자 정의하면 React Native 앱의 채우기 속성을 동적으로 제어할 수 있습니다. 이를 통해 유연성이 향상되고 디자인이 동적이고 사용자 상호 작용이나 테마 변경에 반응하도록 보장됩니다.

위 내용은 React Native에서 SVG에 색상을 동적으로 적용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!