如何在 react-native 中显示 SVG 文件
How to show SVG files in react-native
我想从 illustrator 生成的 SVG 文件渲染图像,我使用 react-native 0.59,react-native-svg和 react-native-svg-uri,
这是我的 jsx:
<View style={styles.aboutSection}>
<SvgUri
width="150"
height="150"
source={require('../../assets/images/logo_blue.svg')}
/>
</View>
和我的 SVG 文件:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-574 823.3 20 14" style="enable-background:new -574 823.3 20 14;" xml:space="preserve">
<style type="text/css">
.st0{fill:#2A327B;}
</style>
<g>
<g transform="translate(-320.000000, -1983.000000)">
<g transform="translate(40.000000, 1680.000000)">
<path class="st0" d="M-284,1140.3c-7.4,0-10-7-10-7s3.4-7,10-7c6.7,0,10,7,10,7S-277.3,1140.3-284,1140.3L-284,1140.3z
M-284,1129.3c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4S-281.8,1129.3-284,1129.3L-284,1129.3z M-284,1135.3c-1.1,0-2-0.9-2-2
s0.9-2,2-2s2,0.9,2,2S-282.9,1135.3-284,1135.3L-284,1135.3z"/>
</g>
</g>
</g>
</svg>
并且在我调试时没有显示,我缺少什么,有没有更好的方法来显示 SVG 文件中的图像?
使用 SVGR 将它们转换为 jsx 是更好的方法,或者还有其他方法。
由于软件包似乎不再维护,经过一段时间的搜索,我最终在 react-native-icons 的帮助下使用自定义网络字体:
- (可选)最小化SVG的大小,我用的是这个目的SVG minizer
- 使用 icomoon
转换字体
- 将生成的字体添加到根目录(或任何其他路径)中的 assets/fonts 文件夹
- 在您的 packages.json
中添加一个 linker
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
- 并且link它使用
react-native link
- 为了创建自定义图标组件,我使用了 react-native-icons,它
有一个 createIconSetFromIcoMoon 函数来渲染从 IcoMoon 生成的字体,还有一个从 Fontello
生成的字体
在我的自定义组件MyIcon.js中,我还添加了生成的selection.json。
import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import MyIconConfig from '../../../selection.json';
const MyIcon = createIconSetFromIcoMoon(MyIconConfig, 'MyIcon-icons', 'MyIcon-icons.ttf');
//name of font I used in the website to generate font and name of ttf files generated
export default MyIcon;
我在我的组件中使用它,我在 demo.html:
中找到它们的图标名称
<MyIcon
style={styles.customStyle}
name="previous"
size={18}
color=’red’
/>
注意:确保您使用的版本>6.3.0 of react-native-icons,以及 link 您的资产 运行:
react-native link ./assets/fonts/
我想从 illustrator 生成的 SVG 文件渲染图像,我使用 react-native 0.59,react-native-svg和 react-native-svg-uri, 这是我的 jsx:
<View style={styles.aboutSection}>
<SvgUri
width="150"
height="150"
source={require('../../assets/images/logo_blue.svg')}
/>
</View>
和我的 SVG 文件:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-574 823.3 20 14" style="enable-background:new -574 823.3 20 14;" xml:space="preserve">
<style type="text/css">
.st0{fill:#2A327B;}
</style>
<g>
<g transform="translate(-320.000000, -1983.000000)">
<g transform="translate(40.000000, 1680.000000)">
<path class="st0" d="M-284,1140.3c-7.4,0-10-7-10-7s3.4-7,10-7c6.7,0,10,7,10,7S-277.3,1140.3-284,1140.3L-284,1140.3z
M-284,1129.3c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4S-281.8,1129.3-284,1129.3L-284,1129.3z M-284,1135.3c-1.1,0-2-0.9-2-2
s0.9-2,2-2s2,0.9,2,2S-282.9,1135.3-284,1135.3L-284,1135.3z"/>
</g>
</g>
</g>
</svg>
并且在我调试时没有显示,我缺少什么,有没有更好的方法来显示 SVG 文件中的图像? 使用 SVGR 将它们转换为 jsx 是更好的方法,或者还有其他方法。
由于软件包似乎不再维护,经过一段时间的搜索,我最终在 react-native-icons 的帮助下使用自定义网络字体:
- (可选)最小化SVG的大小,我用的是这个目的SVG minizer
- 使用 icomoon 转换字体
- 将生成的字体添加到根目录(或任何其他路径)中的 assets/fonts 文件夹
- 在您的 packages.json 中添加一个 linker
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
- 并且link它使用
react-native link
- 为了创建自定义图标组件,我使用了 react-native-icons,它 有一个 createIconSetFromIcoMoon 函数来渲染从 IcoMoon 生成的字体,还有一个从 Fontello 生成的字体
在我的自定义组件MyIcon.js中,我还添加了生成的selection.json。
import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import MyIconConfig from '../../../selection.json';
const MyIcon = createIconSetFromIcoMoon(MyIconConfig, 'MyIcon-icons', 'MyIcon-icons.ttf');
//name of font I used in the website to generate font and name of ttf files generated
export default MyIcon;
我在我的组件中使用它,我在 demo.html:
中找到它们的图标名称<MyIcon
style={styles.customStyle}
name="previous"
size={18}
color=’red’
/>
注意:确保您使用的版本>6.3.0 of react-native-icons,以及 link 您的资产 运行:
react-native link ./assets/fonts/