无法在React Native中显示svg的渐变颜色

Question

我正在使用react-native-svg用渐变色显示svg。我尝试使用：

• 此工具：https://www.smooth-code.com/open-source/svgr/playground/
• svg-to-react-native命令行工具
• SvgUri中的react-native-svg
• 此链接中带有metro.config.js的方法：https://github.com/react-native-community/react-native-svg#use-with-svg-files

我总是得到没有渐变的黑色或紫色svg

.svg：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="59.047" height="59.059" viewBox="0 0 59.047 59.059">
  <defs>
    <style>
      .cls-1 {
        fill: url(#linear-gradient);
      }
    </style>
    <linearGradient id="linear-gradient" x1="0.126" x2="0.718" y2="1.599" gradientUnits="objectBoundingBox">
      <stop offset="0" stop-color="#a934ff"/>
      <stop offset="1" stop-color="#f87c00"/>
    </linearGradient>
  </defs>
  <g id="Layer_2" data-name="Layer 2" transform="translate(-2 -1.994)">
    <path id="Path_83" data-name="Path 83" class="cls-1" d="M58.706,2.007,20.747,6.224A2.109,2.109,0,0,0,18.87,8.333V45.912a12.21,12.21,0,0,0-6.326-1.729C6.724,44.183,2,47.958,2,52.618s4.724,8.435,10.544,8.435,10.544-3.775,10.544-8.435V22.863l33.741-3.754V45.891A12.21,12.21,0,0,0,50.5,44.183c-5.82,0-10.544,3.775-10.544,8.435s4.724,8.435,10.544,8.435,10.544-3.775,10.544-8.435V4.116a2.109,2.109,0,0,0-2.341-2.109ZM12.544,56.836c-3.437,0-6.326-1.94-6.326-4.218S9.107,48.4,12.544,48.4s6.326,1.94,6.326,4.218S15.981,56.836,12.544,56.836Zm10.544-46.6L56.829,6.477v8.435L23.088,18.624ZM50.5,56.836c-3.437,0-6.326-1.94-6.326-4.218S47.065,48.4,50.5,48.4s6.326,1.94,6.326,4.218S53.94,56.836,50.5,56.836Z" transform="translate(0 0)"/>
  </g>
</svg>