react-native-svg에서 잘못된 경로 렌더링

Question

Inkscape 사용 png에서 svg 파일을 만든 다음 반응 네이티브 svg에서 경로 d (Inkscape에 의해 생성됨)를 사용하려고했지만 실패했습니다. 이 내 코드이지만, 그것은 단지 주어진 채우기 색상으로 rectanagle 렌더 : 이것은 결과적으로 렌더링하는 것입니다

import React from 'react'; 
import styled from 'styled-components/native'; 
import { withTheme } from 'styled-components'; 
import Svg, { Path } from 'react-native-svg'; 

const StyledPart = styled.View` 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    opacity: 0.5; 
`; 

const StyledWaveBackground = styled.View` 
    width: 100%; 
    height: 100%; 
    position: relative; 
`; 

const Part = ({ width, height, fill, d }) => (
    <StyledPart> 
    <Svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}> 
     <Path d={d} fill={fill} /> 
    </Svg> 
    </StyledPart> 
); 

const WaveBackground = ({ width, height, theme }) => (
    <StyledWaveBackground> 
    <Part 
     width={width} 
     height={height} 
     fill={theme.color.primary} 
     d="M 203.75,239.89934 C 142.14982,233.15571 74.42389,213.31632 19.88109,186.03745 L 0,176.09419 0,88.047087 0,0 256.25,0 512.5,0 l 0,87.952377 0,87.952383 -8.212,0.84135 c -19.97561,2.04655 -50.95386,8.64648 -74.52537,15.87764 -8.7243,2.6764 -30.4419,10.7209 -48.26133,17.87666 -49.04169,19.6937 -70.93005,25.94725 -103.01454,29.43144 -13.91836,1.51146 -60.81961,1.49106 -74.73676,-0.0325 z" 
    /> 
    <Part 
     width={width} 
     height={height} 
     fill={theme.color.primary} 
     d="M 120,254.17154 C 81.92867,250.44385 47.75997,241.17995 15.9375,225.95786 L 0,218.33426 0,109.16713 0,0 256.875,0 513.75,0 l 0,106.73949 0,106.73949 -2.82013,0.70781 c -1.55107,0.38928 -11.53545,1.66099 -22.1875,2.82599 -28.98642,3.17021 -64.58588,2.85335 -96.24237,-0.85663 -21.29589,-2.49576 -31.64353,-3.00549 -61.25,-3.01714 -32.18921,-0.0126 -36.98349,0.26131 -49.71091,2.84071 -14.16663,2.87109 -33.00602,9.07774 -66.53909,21.92134 -23.25836,8.90826 -36.6669,12.75144 -52.89669,15.16133 -11.77822,1.7489 -30.52554,2.24276 -42.10331,1.10915 z" 
    /> 
    </StyledWaveBackground> 
); 

export default withTheme(WaveBackground); 

(단지 색깔 recatngle) current render result

그러나 이렇게해야한다 (배경을 흔들었다) correct render result

PS :이

Answer 1

가장 중요한 부분 중요한 경우 내가 실제 장치 (안 에뮬레이터) MEIZU M3E에 테스트 해요 - 값을 widt에 대한 h 및 높이와 그 결과 viewBox -가 없습니다. 이 확인 같습니다

<svg width="200" height="100" viewBox="0 0 600 300"> 
 
     <path fill="green" 
 
     d="M 203.75,239.89934 C 142.14982,233.15571 74.42389,213.31632 19.88109,186.03745 L 0,176.09419 0,88.047087 0,0 256.25,0 512.5,0 l 0,87.952377 0,87.952383 -8.212,0.84135 c -19.97561,2.04655 -50.95386,8.64648 -74.52537,15.87764 -8.7243,2.6764 -30.4419,10.7209 -48.26133,17.87666 -49.04169,19.6937 -70.93005,25.94725 -103.01454,29.43144 -13.91836,1.51146 -60.81961,1.49106 -74.73676,-0.0325 z" 
 
    /> 
 
</svg>