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 - がありません。これはOKになります。

<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>