reactjs - 渐变 SVG 在网页上渲染，但不在移动设备上

Question

我正在使用 react-native-svg 呈现包含渐变的图表，在 web 上完美运行，但是在 react-native 上使用相同的代码时它不起作用

这是反应本机代码

const data = [
  {x: new Date(2000, 3, 2), y: 100},
  {x: new Date(2003, 4, 3), y: 120},
  {x: new Date(2002, 5, 4), y: 140},
  {x: new Date(2005, 6, 5), y: 150},
  {x: new Date(2006, 7, 6), y: 130},
  {x: new Date(2007, 8, 7), y: 120},
  {x: new Date(2008, 9, 8), y: 150},
];
export default function Chart4() {
  const dateData = data.map(i => i.x);
  return (
    <Svg>
      <Defs>
        <LinearGradient id="myGradient" x1="0" y1="0" x2="0" y2="1.3">
          <Stop offset="0%" stopColor="#86CD9B" stop-opacity={1} />

          <Stop offset="100%" stopColor="white" stop-opacity={1} />
        </LinearGradient>
      </Defs>
      <VictoryChart scale={{x: 'time', y: 'linear'}}>
        <VictoryAxis dependentAxis />
        <VictoryAxis
          tickValues={dateData}
          tickFormat={x => {
            return x.toLocaleString('vn-vn', {
              month: 'short',
              day: 'numeric',
            });
          }}
        />
        <VictoryArea
          data={data}
          style={{
            data: {fill: 'url(#myGradient)'},
          }}
        />
        <VictoryScatter
          data={data}
          style={{
            data: {
              stroke: '#86CD9B',
              fill: 'white',
              strokeWidth: 1,
              fillOpacity: 1,
            },
          }}
          labels={({datum}) =>
            `x: ${datum.x.toLocaleString('vn-vn', {
              month: 'short',
              day: 'numeric',
            })} \n y:${datum.y}`
          }
          labelComponent={
            <VictoryTooltip
              renderInPortal={false}
              dy={0}
              centerOffset={{x: 25}}
            />
          }
        />
      </VictoryChart>
    </Svg>
  );
}

它什么也没显示

但是在 web ( react ) 上，它工作得很好，这里是https://codesandbox.io/s/chart-blood-glucose-031dn?file=/src/App.js的codesanbbox

怎么回事，求大神帮忙，万分感谢

标签： reactjsreact-nativesvgreact-native-svg