无法使用 react-native-svg 或 Svg/expo 让 Svg 显示在 react-native 中
Posted
技术标签:
【中文标题】无法使用 react-native-svg 或 Svg/expo 让 Svg 显示在 react-native 中【英文标题】：Can't get Svg to show up in react-native with react-native-svg or Svg/expo 【发布时间】：2017-09-13 11:09:38 【问题描述】：我不确定为什么它没有出现。我怀疑这可能与转换有关？
<Svg.G id="startup" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" transform="translate(135.000000, 76.000000)">
但我真的不知道...我看到“无效的道具变换”
当我复制 SVG 代码表单草图时，怀疑我遇到了与此问题类似的问题：
https://github.com/react-native-community/react-native-svg/issues/205
代码如下。有什么想法吗？
import React from 'react';
import Svg from 'expo';
const RocketSvg = () =>
return (
<Svg viewBox="135 76 108 128" version="1.1">
<Svg.G id="startup" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" transform="translate(135.000000, 76.000000)">
<Svg.Ellipse id="Oval" fill="#DCDDDE" cx="54" cy="75" rx="52" ry="51"></Svg.Ellipse>
<Svg.Path d="M81.764,76.608 C79.316,75.5 75.758,74.198 72,73.81 L72,61.414 C77.408,64.05 80.866,70.118 81.764,76.608 Z" id="Shape" fill="#FFFFFF"></Svg.Path>
<Svg.Path d="M26.236,76.608 C27.134,70.118 30.592,64.052 36,61.412 L36,73.804 C32.242,74.194 28.682,75.498 26.236,76.608 Z" id="Shape" fill="#FFFFFF"></Svg.Path>
<Svg.Path d="M40,76 L40,42 C40,37.68 40.562,33.678 41.448,30 L66.556,30 C67.44,33.676 68,37.676 68,42 L68,76 L66,76 L42,76 L40,76 Z" id="Shape" fill="#FFFFFF"></Svg.Path>
<Svg.Polygon id="Shape" fill="#FFFFFF" points="46 84 46 80 62 80 62 84 60 84 48 84"></Svg.Polygon>
<Svg.Path d="M70,78 L70,42 C70,18 54,2 54,2 L54,78 L70,78 Z" id="Shape" fill="#DCDDDE"></Svg.Path>
<Svg.Circle id="Oval" fill="#53B7E8" cx="54" cy="42" r="6"></Svg.Circle>
<Svg.Path d="M98.8,100.76 C96.66,104.34 94.04,107.7 90.96,110.78 C88.58,113.16 86.02,115.26 83.32,117.08 C65.74,129.02 42.46,128.98 24.92,116.96 C22.28,115.18 19.78,113.12 17.44,110.78 C14.26,107.6 11.56,104.1 9.38,100.4 C11.4,96.6 15.4,94 20,94 C25.48,94 30.1,97.7 31.54,102.74 C33.3,99.9 36.42,98 40,98 C44.84,98 48.88,101.44 49.8,106 L50,106 L50,86 L58,86 L58,106 L58.2,106 C59.12,101.44 63.16,98 68,98 C71.58,98 74.7,99.9 76.46,102.74 C77.88,97.7 82.5,94 88,94 C92.74,94 96.84,96.76 98.8,100.76 Z" id="Shape" fill="#FFD768"></Svg.Path>
<Svg.Rect id="Rectangle-path" fill="#DCDDDE" x="54" y="80" ></Svg.Rect>
<Svg.Path d="M91.414,36.586 L90,35.172 L87.172,38 L88.586,39.414 C98.67,49.5 104,61.458 104,74 C104,82.056 102.096,89.812 98.522,96.778 C95.9,93.776 92.12,92 88,92 C82.948,92 78.354,94.752 75.894,98.988 C73.742,97.08 70.96,96 68,96 C64.966,96 62.144,97.148 60,99.062 L60,88 L66,88 L66,80 L72,80 L72,77.844 C77.584,78.546 82.886,81.664 82.966,81.714 L86,83.538 L86,80 C86,70.238 80.864,60.222 72,57.052 L72,42 C72,17.454 56.092,2.09 55.414,1.414 L54,0 L52.586,1.414 C51.908,2.09 36,17.454 36,42 L36,57.052 C27.136,60.222 22,70.238 22,80 L22.002,83.538 L25.034,81.714 C25.116,81.664 30.418,78.542 36,77.842 L36,80 L42,80 L42,88 L48,88 L48,99.062 C45.856,97.148 43.034,96 40,96 C37.036,96 34.252,97.082 32.1,98.994 C29.628,94.754 25.036,92 20,92 C15.91,92 12.116,93.794 9.486,96.794 C5.906,89.824 4,82.06 4,73.998 C4,61.458 9.33,49.5 19.414,39.414 L20.828,38 L18,35.172 L16.586,36.586 C5.736,47.438 0,60.376 0,73.998 C0,88.424 5.618,101.984 15.816,112.184 C26.344,122.71 40.172,128 54,128 C67.828,128 81.656,122.71 92.184,112.184 C102.382,101.984 108,88.424 108,74 C108,60.376 102.264,47.438 91.414,36.586 Z M81.764,76.608 C79.316,75.5 75.758,74.198 72,73.81 L72,61.414 C77.408,64.05 80.866,70.118 81.764,76.608 Z M54.002,5.824 C56.604,8.896 62.168,15.912 65.444,26 L42.566,26 C45.844,15.928 51.404,8.902 54.002,5.824 Z M26.236,76.608 C27.134,70.118 30.592,64.052 36,61.412 L36,73.804 C32.242,74.194 28.682,75.498 26.236,76.608 Z M40,76 L40,42 C40,37.68 40.562,33.678 41.448,30 L66.556,30 C67.44,33.676 68,37.676 68,42 L68,76 L66,76 L42,76 L40,76 Z M46,84 L46,80 L62,80 L62,84 L60,84 L48,84 L46,84 Z M89.356,109.356 C69.86,128.85 38.14,128.85 18.646,109.356 C15.952,106.662 13.616,103.706 11.634,100.558 C13.48,97.732 16.598,96 20,96 C24.436,96 28.39,98.998 29.618,103.29 L30.86,107.638 L33.24,103.794 C34.712,101.418 37.24,100 40,100 C43.794,100 47.092,102.69 47.838,106.394 L48.164,108 L52,108 L52,88 L56,88 L56,108 L59.836,108 L60.16,106.394 C60.908,102.69 64.206,100 68,100 C70.76,100 73.288,101.418 74.76,103.792 L77.154,107.656 L78.386,103.282 C79.592,98.994 83.546,96 88,96 C91.426,96 94.528,97.718 96.372,100.55 C94.39,103.7 92.052,106.658 89.356,109.356 Z" id="Shape" fill="#0C3847"></Svg.Path>
<Svg.Path d="M54,34 C49.588,34 46,37.588 46,42 C46,46.412 49.588,50 54,50 C58.412,50 62,46.412 62,42 C62,37.588 58.412,34 54,34 Z M54,46 C51.794,46 50,44.206 50,42 C50,39.794 51.794,38 54,38 C56.206,38 58,39.794 58,42 C58,44.206 56.206,46 54,46 Z" id="Shape" fill="#0C3847"></Svg.Path>
<Svg.Polygon id="Shape" fill="#0C3847" points="78 16 82 16 82 12 86 12 86 8 82 8 82 4 78 4 78 8 74 8 74 12 78 12"></Svg.Polygon>
<Svg.Polygon id="Shape" fill="#0C3847" points="14 26 18 26 18 22 22 22 22 18 18 18 18 14 14 14 14 18 10 18 10 22 14 22"></Svg.Polygon>
<Svg.Polygon id="Shape" fill="#0C3847" points="96 32 100 32 100 28 104 28 104 24 100 24 100 20 96 20 96 24 92 24 92 28 96 28"></Svg.Polygon>
<Svg.Polygon id="Shape" fill="#0C3847" points="84 46 84 48 82 48 82 52 84 52 84 54 88 54 88 52 90 52 90 48 88 48 88 46"></Svg.Polygon>
<Svg.Polygon id="Shape" fill="#0C3847" points="26 44 30 44 30 42 32 42 32 38 30 38 30 36 26 36 26 38 24 38 24 42 26 42"></Svg.Polygon>
<Svg.Polygon id="Shape" fill="#0C3847" points="26 8 30 8 30 6 32 6 32 2 30 2 30 0 26 0 26 2 24 2 24 6 26 6"></Svg.Polygon>
<Svg.Path d="M54.002,5.824 C56.604,8.896 62.168,15.912 65.444,26 L42.566,26 C45.844,15.928 51.404,8.902 54.002,5.824 Z" id="Shape" fill="#F37053"></Svg.Path>*/
</Svg.G>
</Svg>
);
【问题讨论】：
【参考方案1】：回答关于转换
transform propType 目前不支持作为react-native-svg 的一部分（2017 年 6 月 4 日）
但是你可以使用 x 和 y 属性来代替：
<Svg.G x="135.000000" y="76.000000" id="startup" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
SVG 修复
但是，您粘贴的 SVG 似乎仍未呈现。
我首先将其转换回 SVG 并使用 Sketch 重新导出。
// logo.svg
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 108 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
<title>Slice 1</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke- fill="none" fill-rule="evenodd">
<g id="so" fill-rule="nonzero">
<ellipse id="Oval" fill="#DCDDDE" cx="54" cy="75" rx="52" ry="51"></ellipse>
<path d="M81.764,76.608 C79.316,75.5 75.758,74.198 72,73.81 L72,61.414 C77.408,64.05 80.866,70.118 81.764,76.608 Z" id="Shape" fill="#FFFFFF"></path>
<path d="M26.236,76.608 C27.134,70.118 30.592,64.052 36,61.412 L36,73.804 C32.242,74.194 28.682,75.498 26.236,76.608 Z" id="Shape" fill="#FFFFFF"></path>
<path d="M40,76 L40,42 C40,37.68 40.562,33.678 41.448,30 L66.556,30 C67.44,33.676 68,37.676 68,42 L68,76 L66,76 L42,76 L40,76 Z" id="Shape" fill="#FFFFFF"></path>
<polygon id="Shape" fill="#FFFFFF" points="46 84 46 80 62 80 62 84 60 84 48 84"></polygon>
<path d="M70,78 L70,42 C70,18 54,2 54,2 L54,78 L70,78 Z" id="Shape" fill="#DCDDDE"></path>
<circle id="Oval" fill="#53B7E8" cx="54" cy="42" r="6"></circle>
<path d="M98.8,100.76 C96.66,104.34 94.04,107.7 90.96,110.78 C88.58,113.16 86.02,115.26 83.32,117.08 C65.74,129.02 42.46,128.98 24.92,116.96 C22.28,115.18 19.78,113.12 17.44,110.78 C14.26,107.6 11.56,104.1 9.38,100.4 C11.4,96.6 15.4,94 20,94 C25.48,94 30.1,97.7 31.54,102.74 C33.3,99.9 36.42,98 40,98 C44.84,98 48.88,101.44 49.8,106 L50,106 L50,86 L58,86 L58,106 L58.2,106 C59.12,101.44 63.16,98 68,98 C71.58,98 74.7,99.9 76.46,102.74 C77.88,97.7 82.5,94 88,94 C92.74,94 96.84,96.76 98.8,100.76 Z" id="Shape" fill="#FFD768"></path>
<rect id="Rectangle-path" fill="#DCDDDE" x="54" y="80" ></rect>
<path d="M91.414,36.586 L90,35.172 L87.172,38 L88.586,39.414 C98.67,49.5 104,61.458 104,74 C104,82.056 102.096,89.812 98.522,96.778 C95.9,93.776 92.12,92 88,92 C82.948,92 78.354,94.752 75.894,98.988 C73.742,97.08 70.96,96 68,96 C64.966,96 62.144,97.148 60,99.062 L60,88 L66,88 L66,80 L72,80 L72,77.844 C77.584,78.546 82.886,81.664 82.966,81.714 L86,83.538 L86,80 C86,70.238 80.864,60.222 72,57.052 L72,42 C72,17.454 56.092,2.09 55.414,1.414 L54,0 L52.586,1.414 C51.908,2.09 36,17.454 36,42 L36,57.052 C27.136,60.222 22,70.238 22,80 L22.002,83.538 L25.034,81.714 C25.116,81.664 30.418,78.542 36,77.842 L36,80 L42,80 L42,88 L48,88 L48,99.062 C45.856,97.148 43.034,96 40,96 C37.036,96 34.252,97.082 32.1,98.994 C29.628,94.754 25.036,92 20,92 C15.91,92 12.116,93.794 9.486,96.794 C5.906,89.824 4,82.06 4,73.998 C4,61.458 9.33,49.5 19.414,39.414 L20.828,38 L18,35.172 L16.586,36.586 C5.736,47.438 0,60.376 0,73.998 C0,88.424 5.618,101.984 15.816,112.184 C26.344,122.71 40.172,128 54,128 C67.828,128 81.656,122.71 92.184,112.184 C102.382,101.984 108,88.424 108,74 C108,60.376 102.264,47.438 91.414,36.586 Z M81.764,76.608 C79.316,75.5 75.758,74.198 72,73.81 L72,61.414 C77.408,64.05 80.866,70.118 81.764,76.608 Z M54.002,5.824 C56.604,8.896 62.168,15.912 65.444,26 L42.566,26 C45.844,15.928 51.404,8.902 54.002,5.824 Z M26.236,76.608 C27.134,70.118 30.592,64.052 36,61.412 L36,73.804 C32.242,74.194 28.682,75.498 26.236,76.608 Z M40,76 L40,42 C40,37.68 40.562,33.678 41.448,30 L66.556,30 C67.44,33.676 68,37.676 68,42 L68,76 L66,76 L42,76 L40,76 Z M46,84 L46,80 L62,80 L62,84 L60,84 L48,84 L46,84 Z M89.356,109.356 C69.86,128.85 38.14,128.85 18.646,109.356 C15.952,106.662 13.616,103.706 11.634,100.558 C13.48,97.732 16.598,96 20,96 C24.436,96 28.39,98.998 29.618,103.29 L30.86,107.638 L33.24,103.794 C34.712,101.418 37.24,100 40,100 C43.794,100 47.092,102.69 47.838,106.394 L48.164,108 L52,108 L52,88 L56,88 L56,108 L59.836,108 L60.16,106.394 C60.908,102.69 64.206,100 68,100 C70.76,100 73.288,101.418 74.76,103.792 L77.154,107.656 L78.386,103.282 C79.592,98.994 83.546,96 88,96 C91.426,96 94.528,97.718 96.372,100.55 C94.39,103.7 92.052,106.658 89.356,109.356 Z" id="Shape" fill="#0C3847"></path>
<path d="M54,34 C49.588,34 46,37.588 46,42 C46,46.412 49.588,50 54,50 C58.412,50 62,46.412 62,42 C62,37.588 58.412,34 54,34 Z M54,46 C51.794,46 50,44.206 50,42 C50,39.794 51.794,38 54,38 C56.206,38 58,39.794 58,42 C58,44.206 56.206,46 54,46 Z" id="Shape" fill="#0C3847"></path>
<polygon id="Shape" fill="#0C3847" points="78 16 82 16 82 12 86 12 86 8 82 8 82 4 78 4 78 8 74 8 74 12 78 12"></polygon>
<polygon id="Shape" fill="#0C3847" points="14 26 18 26 18 22 22 22 22 18 18 18 18 14 14 14 14 18 10 18 10 22 14 22"></polygon>
<polygon id="Shape" fill="#0C3847" points="96 32 100 32 100 28 104 28 104 24 100 24 100 20 96 20 96 24 92 24 92 28 96 28"></polygon>
<polygon id="Shape" fill="#0C3847" points="84 46 84 48 82 48 82 52 84 52 84 54 88 54 88 52 90 52 90 48 88 48 88 46"></polygon>
<polygon id="Shape" fill="#0C3847" points="26 44 30 44 30 42 32 42 32 38 30 38 30 36 26 36 26 38 24 38 24 42 26 42"></polygon>
<polygon id="Shape" fill="#0C3847" points="26 8 30 8 30 6 32 6 32 2 30 2 30 0 26 0 26 2 24 2 24 6 26 6"></polygon>
<path d="M54.002,5.824 C56.604,8.896 62.168,15.912 65.444,26 L42.566,26 C45.844,15.928 51.404,8.902 54.002,5.824 Z" id="Shape" fill="#F37053"></path>
</g>
</g>
</svg>
然后我使用msvgc 将其转换为与 react-native-svg 兼容的组件。最后进行了更改，因此与 import Svg from 'expo' 一起使用。您会注意到无论如何都不再有转换，因此不需要您原来的问题。
// Logo.js
import React from 'react'
import Svg from 'expo'
const logo = props => (
<Svg width=props.width || 108 height=props.height || 128 viewBox="0 0 108 128">
<Svg.G fillRule="nonzero" fill="none">
<Svg.Ellipse fill="#DCDDDE" cx="54" cy="75" rx="52" ry="51"></Svg.Ellipse>
<Svg.Path d="M81.764 76.608C79.316 75.5 75.758 74.198 72 73.81V61.414c5.408 2.636 8.866 8.704 9.764 15.194zM26.236 76.608c.898-6.49 4.356-12.556 9.764-15.196v12.392c-3.758.39-7.318 1.694-9.764 2.804zM40 76V42c0-4.32.562-8.322 1.448-12h25.108A51.108 51.108 0 0 1 68 42v34H40zM46 84v-4h16v4H48z" fill="#FFF"></Svg.Path>
<Svg.Path d="M70 78V42C70 18 54 2 54 2v76h16z" fill="#DCDDDE"></Svg.Path>
<Svg.Circle fill="#53B7E8" cx="54" cy="42" r="6"></Svg.Circle>
<Svg.Path d="M98.8 100.76a51.654 51.654 0 0 1-7.84 10.02 51.539 51.539 0 0 1-7.64 6.3c-17.58 11.94-40.86 11.9-58.4-.12a50.5 50.5 0 0 1-7.48-6.18 52.123 52.123 0 0 1-8.06-10.38C11.4 96.6 15.4 94 20 94c5.48 0 10.1 3.7 11.54 8.74C33.3 99.9 36.42 98 40 98a10 10 0 0 1 9.8 8h.2V86h8v20h.2a10 10 0 0 1 9.8-8c3.58 0 6.7 1.9 8.46 4.74C77.88 97.7 82.5 94 88 94c4.74 0 8.84 2.76 10.8 6.76z" fill="#FFD768"></Svg.Path>
<Svg.Path fill="#DCDDDE" d="M54 80h8v4h-8z"></Svg.Path>
<Svg.Path d="M91.414 36.586L90 35.172 87.172 38l1.414 1.414C98.67 49.5 104 61.458 104 74c0 8.056-1.904 15.812-5.478 22.778A13.905 13.905 0 0 0 88 92c-5.052 0-9.646 2.752-12.106 6.988A11.857 11.857 0 0 0 68 96a12.009 12.009 0 0 0-8 3.062V88h6v-8h6v-2.156c5.584.702 10.886 3.82 10.966 3.87L86 83.538V80c0-9.762-5.136-19.778-14-22.948V42C72 17.454 56.092 2.09 55.414 1.414L54 0l-1.414 1.414C51.908 2.09 36 17.454 36 42v15.052C27.136 60.222 22 70.238 22 80l.002 3.538 3.032-1.824c.082-.05 5.384-3.172 10.966-3.872V80h6v8h6v11.062A12.009 12.009 0 0 0 40 96a11.85 11.85 0 0 0-7.9 2.994C29.628 94.754 25.036 92 20 92c-4.09 0-7.884 1.794-10.514 4.794C5.906 89.824 4 82.06 4 73.998 4 61.458 9.33 49.5 19.414 39.414L20.828 38 18 35.172l-1.414 1.414C5.736 47.438 0 60.376 0 73.998c0 14.426 5.618 27.986 15.816 38.186C26.344 122.71 40.172 128 54 128c13.828 0 27.656-5.29 38.184-15.816C102.382 101.984 108 88.424 108 74c0-13.624-5.736-26.562-16.586-37.414zm-9.65 40.022C79.316 75.5 75.758 74.198 72 73.81V61.414c5.408 2.636 8.866 8.704 9.764 15.194zM54.002 5.824C56.604 8.896 62.168 15.912 65.444 26H42.566c3.278-10.072 8.838-17.098 11.436-20.176zM26.236 76.608c.898-6.49 4.356-12.556 9.764-15.196v12.392c-3.758.39-7.318 1.694-9.764 2.804zM40 76V42c0-4.32.562-8.322 1.448-12h25.108A51.108 51.108 0 0 1 68 42v34H40zm6 8v-4h16v4H46zm43.356 25.356c-19.496 19.494-51.216 19.494-70.71 0a50.398 50.398 0 0 1-7.012-8.798C13.48 97.732 16.598 96 20 96c4.436 0 8.39 2.998 9.618 7.29l1.242 4.348 2.38-3.844c1.472-2.376 4-3.794 6.76-3.794 3.794 0 7.092 2.69 7.838 6.394l.326 1.606H52V88h4v20h3.836l.324-1.606C60.908 102.69 64.206 100 68 100c2.76 0 5.288 1.418 6.76 3.792l2.394 3.864 1.232-4.374C79.592 98.994 83.546 96 88 96c3.426 0 6.528 1.718 8.372 4.55a50.456 50.456 0 0 1-7.016 8.806z" fill="#0C3847"></Svg.Path>
<Svg.Path d="M54 34c-4.412 0-8 3.588-8 8s3.588 8 8 8 8-3.588 8-8-3.588-8-8-8zm0 12c-2.206 0-4-1.794-4-4s1.794-4 4-4 4 1.794 4 4-1.794 4-4 4zM78 16h4v-4h4V8h-4V4h-4v4h-4v4h4zM14 26h4v-4h4v-4h-4v-4h-4v4h-4v4h4zM96 32h4v-4h4v-4h-4v-4h-4v4h-4v4h4zM84 46v2h-2v4h2v2h4v-2h2v-4h-2v-2zM26 44h4v-2h2v-4h-2v-2h-4v2h-2v4h2zM26 8h4V6h2V2h-2V0h-4v2h-2v4h2z" fill="#0C3847"></Svg.Path>
<Svg.Path d="M54.002 5.824C56.604 8.896 62.168 15.912 65.444 26H42.566c3.278-10.072 8.838-17.098 11.436-20.176z" fill="#F37053"></Svg.Path>
</Svg.G>
</Svg>
)
export default logo
【讨论】：
以上是关于无法使用 react-native-svg 或 Svg/expo 让 Svg 显示在 react-native 中的主要内容，如果未能解决你的问题，请参考以下文章
react-native-svg onPress 事件不起作用
有没有办法使用 react-native-svg 访问剪辑的 svg 图像以保存回设备中的 react-native
expo install react-native-svg“错误运行此命令会将依赖项添加到工作区根目录而不是工作区本身......”