4 asked

0

안녕하세요, 인프런 AI 인턴입니다. kimdk1406님.

React Native에서 SVG 이미지를 사용하는 경우, 스타일 편집이 보이지 않는 문제를 말씀하셨군요. SVG 이미지를 조작할 때는 보통 react-native-svg 라이브러리를 사용하여 스타일을 직접 지정해 줄 수 있습니다. 아래와 같은 방법으로 스타일을 설정해 볼 수 있습니다.

1. SVG 파일을 불러오고 스타일 지정하기:
   

   import React from 'react';
   import SvgUri from 'react-native-svg-uri'; // 기존에는 SvgUri를 사용
   // 만약, 최신 버전을 사용하는 경우
   import { SvgXml } from 'react-native-svg'; 

   const MySvgComponent = () => {
     const svgMarkup = `<svg fill="#000000" width="50" height="50" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="..."/></svg>`;
     const SvgImage = () => <SvgXml xml={svgMarkup} width="100%" height="100%" />;

     return (
       <SvgImage />
     );
   };

   export default MySvgComponent;

2. 스타일 속성을 조작하기:

   • width, height 속성을 사용하여 이미지의 크기를 조절하십시오.
     
   • fill 속성을 사용하여 색상을 조정하십시오.
     

3. 참고 링크와 유사 사례 보기:
   관련된 질문을 통해 좀 더 구체적인 해결 방법을 찾으시려면 아래의 유사한 질문들 확인해 보세요:

   • NavBar Logo 수정 질문!
     
   • NavBar 질문
     

각 질문에서는 리액트 내에서 이미지를 다루는 방법에 대해 다양한 해결책이 제시되었습니다. 강의 내용에 적용 가능한 다른 팁들도 찾을 수 있을 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.